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Chapter  1 


How  to  Navigate 
Through  This  Manual 


Welcome  to  Adobe 
Go  Live 

Welcome  to  Adobe  GoLive,  the  complete  solution  for 
HTML  layout,  design,  and  Web  site  management.  It  gives 
Macintosh  users  unprecedented  creative  control  and  flex- 
ibility when  designing  a Web  site.  Adobe  GoLive  lets 
graphic  designers  and  publishers  visually  design  and 
manage  a professional-quality  Web  site — including  the 
latest  multimedia  features — without  any  HTML  pro- 
gramming. Yet  Adobe  GoLive  includes  HTML  source-code 
and  JavaScript  tools,  which  help  Web  designers  and  pro- 
grammers integrate  interactivity  into  their  sites.  De- 
signed with  the  future  in  mind,  Adobe  GoLive  also 
supports  Cascading  Style  Sheets,  Dynamic  HTML,  and 
QuickTime™,  three  proven  technologies  that  give  Web 
designers  a wealth  of  new  creativity  tools. 


The  nineteen  chapters  of  this  manual  reflect  the  major  activities  Web 

publishers  and  Web  masters  can  cover  using  Adobe  GoLive: 

• The  present  chapter,  Welcome  to  Adobe  GoLive,  outlines  basic 
system  requirements,  tells  you  where  to  find  installation  instruc- 
tions, and  contains  registration  and  support  information.  This 
chapter  also  includes  basic  program  maintenance  instructions. 

• The  Adobe  GoLive  QuickStart  Guide  chapter  outlines  the  basic 
steps  for  using  Adobe  GoLive. 

• The  Adobe  GoLive  Basics  chapter  contains  briefly  describes  the 
most  important  features  built  into  Adobe  GoLive. 

• Building  Web  Pages  provides  step-by-step  instructions  for  page 
design,  highlighting  Adobe  GoLive’s  powerful  tools  in  the  pro- 
cess. 

• The  Dynamic  HTML  chapter  describes  Adobe  GoLive’s  basic  and 
advanced  DHTML  tools  that  let  users  animate  Web  pages  with 
drag  & drop  ease. 
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• The  Cascading  Style  Sheets  chapter  introduces  Web  style  sheets 
and  provides  instructions  for  using  Adobe  GoLive’s  user-friendly 
implementation  of  the  Cascading  Style  Sheets  technology. 

• QuickTime  Authoring  explains  Adobe  GoLive’s  multimedia 
authoring  environment  for  time-based  data. 

• Working  with  Frames  introduces  the  user  to  HTML  frames. 

• The  chapter  Working  with  Forms  describes  Adobe  GoLive’s  built- 
in  tools  for  building  fill-in  forms. 

• Working  with  Fiead  Tags  provides  instructions  on  how  to  control 
browsers  and  use  specific  head  tags. 

• The  Color  Palette  chapter  presents  Adobe  GoLive’s  drag  & drop 
coloring  tool. 

• The  Using  the  Outline  Editor  chapter  introduces  the  Outline  Edi- 
tor, one  of  Adobe  GoLive’s  powerful  page-editing  tools. 

• Using  the  Source  Editor  tells  experienced  users  how  to  use  the 
Source  Editor  and  the  extra  scripting  capabilities  available  by 
using  AppleScript®. 

• The  Previewing  Your  Work  chapter  explains  how  Adobe  GoLive 
helps  you  preview  your  work — with  and  without  a Web  browser. 

• The  Find  & Replace  chapter  presents  Adobe  GoLive’s  powerful 
tools  for  finding  and  replacing  text. 

• Spellchecking  Your  Work  covers  the  use  of  this  tool. 

• Managing  Web  Sites  with  Adobe  GoLive  explains  how  to  use  the 
advanced  graphical  site  management  tools  built  into  Adobe 
GoLive. 

• The  Web  Database  introduces  Adobe  GoLive’s  Web  Database. 

• The  Web  Technology  Support  chapter  explains  how  Adobe  GoLive 
helps  Web  authors  handle  non-HTML  code  in  Web  pages. 

In  addition,  three  appendixes  with  reference  information  follow  the 

final  chapter: 

• Shortcuts  lists  keyboard  and  mouse  shortcuts  you  may  find  use- 
ful when  working  with  Adobe  GoLive. 

• Visual  Index  is  a visual  guide  to  the  objects  on  Adobe  GoLive’s 
Palette. 

• Creating  Actions  is  a guide  to  JavaScript  developers  who  wisk  to 
write  their  own  scripted  actions  for  Adobe  GoLive’s  DHTML 
authoring  environment. 


Symbols 
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A separate  manual,  Using  WebObjects  with  Adobe  GoLive, 
included  in  the  standard  package,  describes  Adobe  GoLive’s 
WebObjects  editing  tools. 


Symbols 


Throughout  this  manual,  look  for  these  symbols  to  learn  moreabout 
Adobe  GoLive: 


The  Caution  symbol  alerts  you  to  special  background  informa- 
tion that  helps  you  use  Adobe  GoLive  more  efficiently. 


The  How  To  symbol  marks  step-by-step  instructions  on  using 
Adobe  GoLive. 


The  Multiple  Paths  symbol  indicates  alternative  ways  to  achieve 
a given  goal. 


System  Requirements  Adobe  GoLive  runs  on  any  Apple  Power  Macintosh™  or  100%  compat- 
ible computer  with  a minimum  of  16  Megabytes  (MB)  of  free  RAM 
(random  access  memory).  As  a rule  of  thumb,  we  recommend  a 
memory  allocation  of  at  least  24  MB.  Adobe  GoLive  requires  approx- 
imately 26  MB  of  storage  space  on  your  hard  disk  when  installed 
with  the  complete  set  of  standard  modules  shipped  with  the  soft- 
ware. 

Adobe  GoLive  requires  Mac®  OS  8.0  or  later  installed  on  your  system. 
To  use  all  Adobe  GoLive  features,  be  sure  you  have  the  following  sys- 
tem extensions  and  control  panels  installed  on  your  Macintosh  and 
selected  in  the  Extensions  Manager  control  panel: 

• QuickTime™  and  QuickTime  Power  Plug,  Version  3.0  or  later 

• Sound  Manager,  Version  3.3  or  later 

• AppleScript  system  extension 

• Text  Encoding  Converter  system  extension 

• Text  Encodings  folder  (in  System  folder) 

• Apple  Guide™  system  extension 


Upgrading  Note  the  following  information  if  you  are  upgrading  from  an  earlier 

Information  version  or  a trial  version  of  Adobe  GoLive: 

• If  you  are  upgrading  from  a Trial  version  of  Adobe  GoLive  to  a 
Purchased  version,  please  select  Register  Adobe  GoLive  from  the 
Trial  menu  and  enter  your  activation  key.  It  can  be  found  in  the 
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Welcome  to  Adobe  GoLive 


Installation 


Maintaining  Your 
Application 


What  Goes  Where  When 
Installing  Adobe  GoLive? 


email  confirming  shipment  of  your  order  if  you  ordered  the 
“Download  +”  package  direct  from  Adobe  GoLive.  Otherwise,  it 
can  be  found  on  the  Registration  card. 

• If  you  are  updating  from  Version  2.x  to  Version  4,  be  sure  to  drag 
the  following  items  out  of  the  Adobe  GoLive  2.x  Modules  and 
Plug  Ins  folders  before  you  move  the  old  version  to  the  Trash: 

- items  you  have  stored  in  the  Custom  tab  of  the  Palette  (these 
are  contained  in  the  Palette  file) 

- any  personal  dictionaries  you  have  created 
plugins  from  the  2.x  Plug  Ins  folder 

Note  that  the  HTML  tag  database  from  version  2 is  not  compa- 
tiable  with  version  4 and  can’t  be  moved. 

• Existing  project  hies  from  earlier  versions  must  be  updated  for 
use  in  Adobe  GoLive  4.  Chapter  17,  Managing  Web  Sites  with 
Adobe  GoLive,  presents  step-by-step  instructions  for  updating 
Adobe  GoLive  project  hies  (see  Part  29 — Using  Adobe  GoLive 
Project  Files). 


For  instructions  on  how  to  install  Adobe  GoLive,  please  refer  to  the 
Read  Me  First!  hie  on  the  CD-ROM. 


When  installing  Adobe  GoLive,  the  installer  program  copies  either  of 
two  default  sets  of  program  hies  to  your  hard  disk,  according  to  the 
preferences  you  select  in  the  installer  window.  The  following  section 
briefly  describes  the  application  hies  and  folders  and  their  respective 
locations  on  your  hard  disk,  letting  you  keep  track  of  what  goes 
where  when  you  install  the  program. 

This  section  also  describes  the  Modules  Manager,  which  lets  you 
customize  the  application  by  disabling  or  enabling  individual 
program  modules  from  within  the  Preferences  dialog  box. 


The  Adobe  GoLive  installer  program  copies  all  hies  to  the  Adobe 
GoLive  program  folder. 


Maintaining  Your  Application 
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Items  in  the  Adobe  GoLive  Program  Folder 

The  following  screenshot  shows  the  contents  of  the  Adobe  GoLive 
program  folder  after  installation. 


The  Adobe  GoLive  Program  Folder  after 
Installation 


Here  is  a brief  explanation  of  the  program  components  and  their 
respective  functions: 

Component  Function 

Adobe  GoLive  4 This  is  the  application  program  file.  Program  maintenance  may  require  that  you 

select  this  icon  in  the  Finder,  open  the  Information  dialog  box,  and  change  the 
program’s  memory  allocation.  For  more  information,  please  refer  to  the  Mac  OS 
documentation  that  came  with  your  computer. 

Adobe  GoLive  Cache  Adobe  GoLive  uses  this  folder  for  intermediate  storage  of  image  files  at  runtime. 

Modules  Adobe  GoLive  uses  this  folder  to  store  its  active  program  modules.  Program 

modules  add  extra  features  to  the  program’s  default  functionality  (for  more  in- 
formation, see  the  section  Using  the  Modules  Manager  later  in  this  chapter). 

Modules  (disabled)  Adobe  GoLive  uses  this  folder  as  a repository  for  program  modules  you  have  dis- 
abled in  the  Modules  Manager  (see  the  Using  the  Modules  Manager  section  in 
this  chapter).  When  installing  Adobe  GoLive,  the  WebObjects,  AIAT,  Asia  Encod- 
ings, and  Mac  OS  Encoding  modules  are  automatically  disabled  and  copied  to 
this  folder. 

This  folder  is  created  when  you  specify  a folder  for  imported  images  in  the  Gen- 
eral - Images  Preferences  dialog  box.  It  stores  images  that  are  automatically  cre- 
ated when  you  import  a PICT,  TIFF,  or  Adobe  Photoshop  image  file  via  drag  & 
drop. 

This  folder  holds  plugin  components  that  let  Adobe  GoLive  behave  exactly  like 
a Web  browser-for  example,  play  back  QuickTime  movies  in  its  Layout  and  Pre- 
view modes.  Installing  plugins  is  a simple  drag  & drop  procedure.  Drag  the  new 
plugin  icon  from  the  plugins  folder  of  your  Web  browser  at  the  Plugins  folder  in 
the  program  folder,  then  relaunch  Adobe  GoLive.  The  plugin  component  should 
be  ready  for  use  now. 

CyberStudio  SupportLib  is  a shared  library  that  contains  common  routines 
that  are  frequently  accessed  by  the  program  and  its  modules 


Import  Images 


Plugins 


CyberStudio 

SupportLib 
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Welcome  to  Adobe  GoLive 


Using  the  Modules 
Manager 


General 

The  Modules  Manager  is  a unique  feature  that  makes  Adobe  GoLive 
fully  scalable  to  meet  individual  needs.  Not  only  does  it  reproduce 
the  “look-and-feel”  of  the  MacOS  Extension  Manager  but  it  also  works 
much  like  this  useful  system  utility,  giving  both  experienced  and  nov- 
ice users  a familiar  graphical  interface  for  customizing  Adobe  GoLive. 


The  Modules  Manager 


Click  the  Modules  icon  to  display  the  Modules 
Manager  pane  in  the  Preferences  dialog  box. 


Scroll  through  the  Modules  list  to  view  the  pro- 
gram modules  currently  installed. 

Check  or  uncheck  these  boxes  to  activate  and 
deactivate  individual  program  modules,  then 
relaunch  the  application. 


Click  the  small  triangle  to  show  or  hide  the  Item 
Information  pane  below  the  Modules  list.  The 
Item  Information  pane  shows  background  in- 
formation on  the  currently  selected  module. 
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The  Modules  Manager  allows  you  to  disable  or  enable  selected 
modules  to  customize  Adobe  GoLive’s  command  inventory  to  meet 
your  needs.  For  example,  if  you  don’t  create  dynamic  Web  pages 
using  Apple’s  WebObjects  development  environment,  you  may 
choose  to  disable  the  WebObjects  module. 

Application  Memory  Considerations 

The  Modules  Manager  lets  you  streamline  the  application  to  shorten 
its  launch  time,  improve  its  responsiveness  (slightly),  and  reduce 
overall  memory  requirements.  For  example,  when  your  computer  is 
low  on  RAM  and  the  size  of  your  job  allows  you  to  manage  your  site 
in  the  Finder,  you  can  use  the  Modules  Manager  to  disable  Adobe 
GoLive’s  WebObjects  Module.  This  lets  Adobe  GoLive  run  with  less 
RAM.  By  disabling  further  modules,  you  can  reduce  the  program’s 
memory  requirements  to  the  minimum  recommended  16  MB,  but 
be  aware  that  this  results  in  major  tradeoffs  in  functionality. 


Maintaining  Your  Application 


9 


Adobe  GoLive  Module  Reference 


The  following  brief  descriptions  of  the  program  modules  shipped 
with  Adobe  GoLive  are  a reference  for  users  who  are  not  sure 
whether  they  should  disable  or  enable  a specific  module. 


Module 

AIAT  Module 


CS  Encodings 

Color  Palette 
CyberFlash  Module 
CyberMovie  Module 

CyberObjects  Module 
HTML  Outline  Module 

IE  Module 
Mac  OS  Encoding 


Modules  Manager 
Network  Module 

Open  Recent  Module 

PNG  Image  Format 


Function  Added 

Based  on  Apple  Information  Access  Technology  (AIAT),  this  component  en- 
ables Adobe  GoLive  to  search  your  site  like  an  index-based  search  engine.  It 
changes  the  appearance  of  the  Find  dialog  box  by  adding  the  Use  index 
checkbox  and  a dedicated  Search  in  Site  Index  tab  rider. 

This  component  adds  several  application-specific  Asian  encodings  (identi- 
fied by  leading  “CS-”)  to  the  Document  Encodings  submenu  (see  illustration 
on  the  next  page).  It  also  adds  the  same  encoding  options  to  the  Font  & 
Scripts  and  Encodings  panes  of  the  Preferences  dialog  box,  as  well  as  to  the 
popup  menu  at  the  bottom  of  Open...  and  Find  & Replace  dialog  boxes. 

This  component  activates  the  Color  Palette,  adding  the  Color  Palette  com- 
mand to  the  Window  menu. 

This  module  enables  support  for  using  Macromedia  Flash  and  Shockwave 
animations  as  plugins. 

This  component  enhances  Adobe  GoLive  by  the  built-in  QuickTime™  author- 
ing environment,  enabling  tbeOpen  command  to  open  QuickTime  movies  as 
well  as  the  Track  Editor,  the  Movie  Viewer,  and  media-specific  Inspectors.  It 
also  adds  the  QuickTime  tab  to  the  Palette  and  the  New  QuickTime  Movie 
command  to  the  New  Special  submenu  of  the  File  menu. 

This  component  enables  support  for  Dynamic  HTML.  \ta66stheCyberObjects 
tab  to  the  Palette  and  enables  the  Timeline  Editor  and  the  associated  button 
in  the  document  window. 

This  component  activates  Adobe  GoLive’s  Outline  Editor,  adding  the  Outline 
Editor  tab  to  the  tab  bar  at  the  top  of  the  main  document  window,  a context- 
sensitive  Outline  Toolbar,  and  several  editor-specific  items  to  th q Special 
menu. 

This  component  activates  support  for  Microsoft  Internet  Explorer-specific 
features,  adding  the  two  ActiveX  and  Marquee  objects  to  the  Basic  Tags  tab  of 
the  Palette. 

This  is  the  key  component  to  Adobe  GoLive’s  multiple-language  support,  en- 
ablingthe  program  to  work  with  the  Mac  OS  TecEncoder  system  extension.  It 
adds  multiple  standard  encodings  to  the  Document  Encodings  submenu,  in- 
cluding European,  Chinese,  Japanese,  Arab,  Greek,  Hebrew,  Cyrillic,  Devana- 
gari,  Thai,  Korean,  and  many  others.  It  also  adds  the  same  encoding  options 
to  the  Font  & Scripts  and  Encodings  panes  of  the  Preferences  dialog  box,  as 
well  as  to  the  popup  menu  at  the  bottom  of  Open. . . and  Find  & Replace  di- 
alog boxes.  Do  not  disable  when  you  are  working  with  foreign-language  en- 
codings! Disabling  the  Mac  OS  Encoding  module  reduces  your  options  to  the 
program’s  three  application-specific  Western  default  encodings  (see  illustra- 
tion on  the  next  page). 

Enabled  by  default,  this  component  adds  the  Modules  Manager  pane  to  the 
Preferences  dialog  box. 

This  component  activates  Adobe  GoLive’s  built-in  FTP  support,  adding  the 
FTP  vertical  tab  to  the  right  pane  of  the  Site  Window,  the  FTP  Upload  & Down- 
load command  to  the  File  menu,  and  the  Network  options  to  the  Preferences 
dialog  box. 

This  component  allows  Adobe  GoLive  to  record  the  Web  pages  and  site  doc- 
uments recently  edited.  It  adds  the  Open  Recent  Files  command  to  the  File 
menu.  In  the  submenu,  the  most  recent  site  document  and  Web  page  are 
listed  with  keyboard  shortcuts. 

This  component  enables  Adobe  GoLive  to  import  PNG  (Portable  Network 
Graphics)  and  TIFF  (Tagged  Image  File  Format)  image  files  using  Point  & 
Shoot,  drag  & drop,  or  any  other  optional  methods  supported  by  the  appli- 
cation. It  also  adds  PNG-specific  options  to  the  General  Preferences  - Image  di- 
alog box. 
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The  Document  Encodings  Menu  with  the 
Mac  OS  Encodings  Enabled  and  Disabled 


Function  Added 

This  component  activates  Adobe  GoLive’s  Preview  feature,  adding  the  Pre- 
view and  Frames  Preview  tabs  to  the  tab  bar  at  the  top  of  the  main  document 
window. 

This  component  activates  Adobe  GoLive’s  JavaScript  support  for  body  and 
head  scripts  in  Web  pages.  It  adds  the  JavaScript  icon  to  the  Basic  tab  of  the 
Palette  and  enables  the  Body  and  Head  Script  Inspectors.  Behind  the  scenes, 
this  component  makes  Adobe  GoLive  scriptable  with  AppleScript. 

This  component  activates  the  Site  Window  with  its  management  capabilities 
for  Web  pages,  media  files,  URLs  and  E-mail  addresses,  colors,  and  font  sets, 
as  well  as  its  site  viewing  and  design  tools.  It  adds  the  Site  menu  to  Adobe 
GoLive’s  menu  bar,  the  New  Site  and  Import  Site  Folder  commands  to  the  File 
menu,  and  the  Site  group  of  options  to  the  Preferences  dialog  box. 

Spellchecker  Module  This  component  activates  Adobe  GoLive’s  built-in  spellchecker,  adding  the 
Spellchecking. . . command  to  the  Edit  menu  and  the  Spell  Checking  option  to 
the  Preferences  dialog  box. 

Web  Download  Module  This  component  enables  Adobe  GoLive  to  download  individual  Web  pages, 
including  all  links,  plugins,  and  images.  It  adds  the  WWW  download. . . com- 
mand to  the  File  menu.  In  order  for  this  module  to  be  fully  functional,  the 
Network  module  must  be  enabled. 

WebObjects  Module  This  component  activates  Adobe  GoLive’s  WebObjects  support,  adding  the 
WebObjects  submenu  to  the  Special  menu,  the  WebObjects  tab  to  the  Palette, 
the  Declaration  Editor  tab  to  the  main  document  window,  and  several  op- 
tions to  the  Preferences  dialog  box. 


Module 

Preview  Module 
Scripting  Module 

Site  Module 


An  example  of  how  a disabled  module  impacts  Adobe  GoLive’s 
menus  appears  below. 


..evert  i_  ..aved 

✓ CS-Ulestern  (Latinl) 

FTP  Upload  & Download... 
Web  Download...  0160 

CS-Ulestern  (MacRoman) 
CS-Ulestern  (NeXTStep) 
Ulestern  (Mac  OS  Roman) 
Ulestern  (Ulindouis  Latin  1) 
Icelandic  (Mac  OS) 

Page  Setup- 
Print.. 

36P 

Quit 

36Q 

Turkish  (Mac  OS) 

Turkish  (Ulindouis  Latin  5) 
Croatian  (Mac  OS) 
Romanian  (Mac  OS) 

CS-Japanese  (EUC-JP) 
CS-Japanese  (Shift-JIS) 
CS-Japanese  (IS0-2022-JP) 
Japanese  (Mac  OS) 
Japanese  (ISO  2022-JP) 
Japanese  (EUC) 

Japanese  (Shift  JIS) 

CS-Traditional  Chinese  (Big  5) 

Trad  tal  Chi’  i (Me  I 


.euert , ,aued 

FTP  Upload  & Download- 
Web  Download-  0X0 

CS-Western  (MacRoman) 
CS-UJestern  (NeXTStep) 

Page  Setup- 
Print...  XP 

Quit  XQ 

Mac  OS  Encodings  enabled 


Mac  OS  Encodings  disabled 


Optimizing  Program  Performance 
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Optimizing  Program 
Performance 


To  optimize  the  program’s  responsiveness,  Adobe  GoLive  uses  a ded- 
icated folder  as  cache  storage  for  compressed  images.  The  Cache 
view  of  the  Preferences  dialog  box  gives  you  extensive  control  over 
this  program  cache:  For  example,  you  can  specify  another  folder,  in- 
crease cache  size  to  improve  overall  performance,  flush  the  contents 
of  the  cache  to  remedy  low-memory  conditions,  and  turn  the  pro- 
gram cache  on  and  off. 


The  Preferences  - General  - Cache 
Dialog  Box 


Click  this  icon  to  view  Adobe  GoLive’s  program 
cache  options. 


Preferences 


1 Cancel  | ||  OK  )] 


To  set  up  the  program  cache,  proceed  as  follows: 

1 Choose  Preferences  from  the  Edit  menu 

2 Click  the  small  arrow  next  to  the  General  icon  in  the  scrolling 
sidebar  to  expand  the  General  group  of  options. 

3 If  desired,  click  the  Select. . . button  to  specify  another  folder. 

4 Place  the  cursor  in  the  Maximum  Size  text  box  to  increase  the 
storage  space  allocation  for  Adobe  GoLive’s  program  cache.  This 
may  speed  up  the  program  when  you  are  dealing  with  image- 
rich  pages. 

Tip:The  size  of  the  program  cache  defaults  to  32  megabytes.  Al- 
though the  application  works  with  less  cache  allocated,  you 
shouldn’t  use  less-than-default  values.  If  your  hard  disk  runs  out 
of  storage  space,  try  deleting  unused  files  instead. 

5 Clear  Cache  Now  flushes  the  content  of  Adobe  GoLive’s  cache 
folder,  thus  freeing  hard  disk  space.  Use  this  button  as  a last  re- 
sort when  Adobe  GoLive’s  cache  threatens  to  consume  even  the 
last  few  megabytes  of  remaining  hard  disk  space. 
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Registration 


About  Adobe 
Products  and  Services 


Welcome  to  Adobe  GoLive 


6 The  Cache  enabled  checkbox  toggles  the  program  cache  on  and 
off.  We  recommend  that  you  leave  the  program  cache  enabled  at 
all  times. 


Adobe  is  confident  you  will  find  that  the  Adobe  GoLive  program 
greatly  increases  your  productivity.  So  that  Adobe  can  continue  to 
provide  you  with  the  highest  quality  software,  offer  technical 
support,  and  inform  you  about  new  software  developments,  please 
register  your  copy  by  filling  out  and  returning  the  warranty  registra- 
tion card  included  with  your  software  package. 


If  you  have  an  Internet  connection  and  a Web  browser  installed  on 
your  system,  you  can  access  the  Adobe  Systems  Home  Page  on  the 
World  Wide  Web  (at  http://www.adobe.com)  for  information  on 
services,  products,  and  tips  pertaining  to  GoLive. 


Chapter  2 Adobe  GoLive 

QuickStart  Guide 


Adobe  GoLive  is  a rich  program  with  many  features;  the  best  way  to 
learn  about  them  all  is  to  refer  to  the  User  Manual.  However,  Adobe 
GoLive  also  lets  you  accomplish  many  things  without  having  to 
spend  a long  time  with  documentation.  This  QuickStart  Guide  can’t 
replace  the  User  Manual,  but  it  will  get  you  designing  Web  sites 
quickly. 

Here’s  what  the  three  parts  of  the  QuickStart  Guide  cover: 

• A Brief  Introduction  to  HTML  explains  the  basics  of  World  Wide 
Web  technology  and  tells  you  how  to  “hand-code”  a simple  Web 
page. 

• Making  First  Steps  with  Adobe  GoLive  on  page  20  acquaints  you 
with  the  program’s  basic  features  using  a series  of  step-by-step 
instructions.  It  discusses: 

- creating  pages 

- adding  content  to  pages,  including  text  and  graphics 

- creating  a site  document 
linking 

previewing  your  work 

• Using  Advanced  Features  on  page  40  introduces  program’s 
advanced  features.  It  explains: 

- inserting  images  in  multiple  ways 
making  links  in  several  ways 

- designing  a site 


Parti  — A Brief  Introduction  to  HTML 


General  You  must  use  HyperText  Markup  Language  (HTML)  to  publish  on  the 

World  Wide  Web  so  your  audience’s  browsers  can  read  your  material. 
The  following  section  introduces  HTML  for  those  who  are  new  to  Web 
publishing.  In  detailed  step-by-step  instructions,  you  will  learn  how 
to  hand-code  your  first  page. 
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Adobe  GoLive  QuickStart  Guide 


Using  Adobe  GoLive  doesn’t  require  extensive  knowledge  of 
HTML.  If  you  prefer,  you  can  skip  this  section  and  go  directly  to 
Part  2 — Making  First  Steps  with  Adobe  GoLive. 


Getting  Started: 
Create  a File  to  Hold 
Your  HTML 


Unlike  other  popular  file  formats,  such  as  Microsoft  Word,  an  HTML 
page  can  be  created  using  any  program  that  can  save  in  text-only  for- 
mat, including  Simple  Text  and  Claris  Works.  This  is  because  the  for- 
matting instructions  are  written  to  a simple  text  file  using  a special 
markup  pattern  instead  of  the  hidden  binary  code  of  conventional 
word  processor  files.  HTML  markup  instructions  are  enclosed  in  an- 
gle brackets  (“less  than”  and  “greater  than”  signs)  and  look  like  this: 
<B>  or  </H2>.  HTML  markup  instructions  are  referred  to  as  “tags”. 
They  instruct  the  browser  how  to  display  text  and  do  not  appear  on 
the  screen  themselves. 

Common  to  all  HTML  files  is  the  following  basic  “skeleton”: 

<HTML> 

<HEAD> 

<TITLE>This  title  appears  in  the  title  bar  of  the 
browser  window . </TITLE> 

</HEAD> 

<BODY> 

This  section  contains  text  with  markup. 

</BODY> 

</HTML> 

This  basic  structure  tells  the  browser  that  it  is  receiving  an  HTML 
page,  subdivided  into  a header  (<HEAD>)  and  a body  (<BODY>)  sec- 
tion. Except  for  the  text  enclosed  in  the  <TITLE>...  </TITLE>  sec- 
tion, which  appears  in  the  title  bar  of  the  browser,  the  content  of  the 
header  section  is  invisible.  The  text  in  the  body  section  constitutes 
the  visible  content  of  the  HTML  page  and  displays  in  the  browser’s 
main  document  window. 

Task:  Use  a simple  word  processor  to  hand-code  the  structure  shown 
above  and  save  the  result  as  a text  file  with  the  extension  .html-  for 
example,  as  mypage.html.  You  will  use  this  skeleton  page  in  the  fol- 
lowing steps. 


Step  One: 
Formatting  Text 


To  appear  formatted  in  the  browser,  text  must  be  enclosed  in  a pair 
of  tags,  known  as  the  start  tag  and  the  end  tag.  The  end  tag  with  its 
extra  slash  character  (“/”)  indicates  the  end  of  the  formatting.  Here’s 
how  boldface  type  is  coded  in  HTML: 


<B>This  is  text  set  in  boldface . </B> 


A Brief  Introduction  to  HTML 
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Tags  can  also  be  nested  to  assign  multiple  formats: 

<B><I>This  is  text  set  in  boldface  and  italics . </I></B> 

Unlike  word  processors  and  DTP  programs,  however,  the  final  ap- 
pearance of  an  HTML  page  is  not  based  on  specific  formatting  you 
apply.  Rather  than  assigning  an  exact  size  and  font,  you  specify  the 
function  of  the  text  within  the  document — for  example,  that  it 
should  be  displayed  as  a first-level  header  (<H1>).  There  is  a simple 
reason  for  this:  Web  pages  are  supposed  to  display  evenly  on  any 
computer  platform  and  any  monitor  size. 

Other  than  a printed  brochure,  which  will  use  the  font  size(s)  se- 
lected in  the  DTP  program,  you  have  no  way  of  knowing  which  hard- 
wareand  software  your  audience  will  use.  Text  formatted  in  14  point 
size  may  look  good  on  a 14-inch  monitor  but  is  definitely  oversized 
for  a PDA  (Personal  Digital  Assistant)  display.  HTML  solves  that  prob- 
lem by  assigning  a structure  to  a text  and  letting  hardware  and  soft- 
ware interpret  it  as  the  user  specifies. 

Task:  Use  a simple  word  processor  to  hand-code  the  examples 
given  above,  save  the  resulting  file  with  an  .html  extension, 
then  drag  them  at  the  program  icon  of  the  browser  for  pre- 
viewing. 

Type  the  examples  given  above  anywhere  in  the  section  enclosed  by 
thetwo  <BODY>...</BODY>  tags  in  the  hand-coded  example  page 
you  have  created  in  the  previous  step.  Save  the  page,  then  drag  it  at 
the  program  icon  of  the  browser  to  preview  the  styles. 


HTML  Tags  Used  for 
Formatting  Text 


Header  <H1>...</H1>  through  <H6>...</H6> 

Headers  are  displayed  in  a larger  font  size  and  frequently  in  boldface 
to  make  them  stand  out  from  the  body  text.  The  digits  1 through  6 
represent  the  different  levels  in  the  hierarchy:  HI  is  a first-level 
header,  H2  a second-level  sub-header,  H3  a third-level  sub-header, 
and  so  on. 

Font  Styles 

Font  style  options  include  Bold  (<B>),  Italics  (<l>),  and  Underline 
(<U>),  as  well  as  Teletype  (<TT>),  a monospaced  style.  Addi- 
tional logical  styles  are  Strong  <STRONG>  and  Emphasis  <EM>, 
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which  display  as  boldface  and  italics  in  most  (but  not  all)  browsers, 
respectively. 


Paragraphs  and  Line  Breaks 

To  break  HTML  text  at  a selected  location,  you  must  insert  a para- 
graph tag  <P>  or  a line  break  tag  <BR>.  Both  of  these  are  start  tags 
without  end  tags-that  is,  they  do  not  need  a closing  </.>  tag.  The 
paragraph  tag  creates  an  empty  line  break  above  the  following  text. 
It  can  include  attributes,  such  as  in  <P  ALIGN="CENTER">  or 
<P  ALIGN="RIGHT">  that  control  the  alignment.  The  break  tag  lets 
the  text  wrap  without  creating  subsequent  whitespace. 


Unlike  word  processors  or  DTP  programs,  inserting  carriage  re- 
turn characters  doesn’t  cause  the  text  to  break;  the  browser  ig- 
nores them.  Also,  inserting  multiple  space  characters  will  cause 
them  to  show  up  temporarily,  but  all  but  one  will  be  removed. 


Lists 

Formats  for  lists  include  numbers  or  characters  such  as  bullets. 
Numbered  lists  start  with  <OL>,  unnumbered  lists  with  <UL>.  An 
<LI>  tag  precedes  each  item  in  the  list.  The  list  ends  with  a </OL> 
or  </UL>  end  tag,  depending  on  whether  it  is  numbered  or  unnum- 
bered. 


Special  Characters 

To  enter  special  characters,  you  must  use  a special  notation,  such  as 
&amp  for  the  ampersand  (“&”)  character. 

Rulers 

The  <HR>  tag  inserts  horizontal  rulers.  This  tag  can  have  WIDTH  and 
SIZE  attributes.  You  can  indicate  the  width  in  pixels  or  in  percent  of 
the  browser’s  window.  For  example,  to  specify  a ruler  that  takes  up 
75  percent  of  the  screen  and  is  three  pixels  high,  you  can  modify  the 
<HR>  tag  as  follows: 

<HR  WIDTH=7 5%  SIZE  = 3> 

Task:  Type  the  example  given  above  anywhere  in  the  section  en- 
closed by  the  two  <BODY>...</BODY>  tags  in  the  hand-coded  file 
you  have  created  before.  Save  the  file,  then  drag  it  at  the  program 
icon  of  the  browser  to  preview  the  tags. 


Step  Two:  Inserting  Images 
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Step  Two: 
Inserting  Images 


Step  Three:  Creating 
Links 


To  repeat,  HTML  files  are  text-only  files.  So,  rather  than  physically  in- 
serting images  in  the  page,  you  must  use  a special  notation  to  tell  the 
browser  which  image  to  display  and  which  image  to  load.  Imagesare 
referenced  using  the  <IMG>  tag,  which  is  a simple  tag  without  an 
end  tag.  Here  is  an  example: 

<IMG  SRC="myimage . gif"  WIDTH="32"  HEIGHT="32" 
ALT="Please  enable  image  loading  in  your  browser !> 

This  element  displays  the  image  file  myimage.gif,  sets  its  width  and 
height  to  32  pixels,  and  displays  an  alternative  message  if  image 
loading  is  disabled  in  the  browser. 

Images  can  have  more  attributes  than  the  example  above  indi- 
cates— for  example,  ALIGN,  which  controls  the  position  of  the  image 
relative  to  adjacent  text,  or  HSPACE  and  VSPACE,  which  create  extra 
horizontal  or  vertical  spacing  between  the  image  and  adjacent  ele- 
ments. 

Task:  Copy  a GIF,  JPEG,  or  PNG  image  file — the  three  image  formats 
the  World  Wide  Web  uses — into  the  folder  where  you  have  saved  the 
hand-coded  example  page.  Type  the  <IMG>  tag  shown  above  any- 
where in  the  section  enclosed  by  the  two  <BODY>...</ESODY>  tags 
in  the  example  page,  replacing  myimage.gif  with  the  name  of  your 
image  file.  Save  the  example  page,  then  drag  it  at  the  program  icon 
of  the  browser  to  preview  the  image.  If  it  comes  out  distorted  be- 
cause the  image  is  rectangular,  go  back  to  the  example  page  and 
change  the  width  and  height  settings  accordingly. 


What  makes  HTML  such  a unique  tool  is  that  it  lets  authors  link  re- 
lated items  of  information,  either  locally  within  a site  or  across  the 
wholeWorld  Wide  Web.  Information  islinked  by  inserting  hyperlinks, 
which  use  the  following  basic  notation: 

<A  HREF="mypage . html" >Don' t Miss  Our  Special  WWW  Fea- 
ture</A> 

The  example  above  shows  how  to  reference  a page  that  is  in  the 
same  folder  as  the  source  page  of  the  link — for  example,  on  your 
hard  disk.  The  HREF  attribute  contains  the  reference  to  that  page. 
The  text  that  the  start  and  end  tags  enclose  is  the  clickable  link  that 
appears  in  the  browser. 

By  using  Universal  Resource  Locators  (URLs),  you  can  link  to  any  page 
on  the  World  Wide  Web  by  specifying  its  exact  location: 

<A  HREF="http: //www.mysite/home/index.html">Be  Sure  Not 
to  Miss  XYZ's  Homepage</A> 
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If  you  use  this  type  of  URL  specification,  you  can  only  access  the  page 
via  the  Internet.  It  doesn’t  work  when  the  file  is  on  your  local  hard 
disk. 

Task:  Save  a copy  of  the  example  page-  for  example,  under  the 
name  yourpage.html-  and  add  text  enclosed  in  <B>...</B> 
style  tags.  Go  to  the  HEAD  section  and  edit  the  text  in  the 
<TITLE>...</TITLE>  tags.  Save  the  new  page,  then  open 
mypage.html  again  and  type  the  following  code  anywhere  in 
the  section  enclosed  by  the  two  <BODY>...</BODY>  tags: 


<A  HREF="yourpage . html">Go  to  your  page.</A> 


Save  the  page,  then  drag  it  at  the  program  icon  of  the  browser 
to  preview  the  link.  The  link  appears  as  underlined  text.  Click 
the  link.  The  browser  will  jump  to  the  new  page  and  show  its 
content. 


Where  to  Go  from 
Here 


Now  that  you  have  mastered  HTML  at  source  code  level,  it  is  time  to 
move  on  and  see  how  easily  Adobe  GoLive  lets  you  format  text,  insert 
images,  and  create  links.  Part  2 of  this  chapter  introduces  the  basic 
features. 


Part  2 — Making  First  Steps  with  Adobe  GoLive 


What  You  Need  to  Get 
Going 


Minimum  System  Requirements 

• A Power  Mac  (or  equivalent)  running  Mac  OS  8.0  or  later 


For  Full  Functionality 

• QuickTime  and  QuickTime  Power  Plug,  Versions  3.0  or  later 

• Sound  Manager  3.3  or  later 

• AppleScript  and  Apple  Guide  system  extensions 

• Text  Encoding  Converter  system  extension 

• Text  Encodings  folder  (in  System  folder) 


Installing  Adobe  GoLive 
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Installing  Adobe 
GoLive 


How  to  Work  in  Quick- 
Start 


Creating 

Individual 

Pages: 

Working 

Bottom-Up 


1 If  you  are  updating  from  Adobe  GoLive  Version  2.x  to  Version  4, 
be  sure  to  make  backup  copies  of  the  following  items  before  you 
move  the  old  version  to  the  Trash: 

- the  Adobe  GoLive  Palette  file  from  the  Modules  folder;  this  file 
contains  the  items  you  have  stored  in  the  Custom  tab  of  the 
Palette 

- any  personal  dictionaries  you  have  created  (from  the  Modules 
folder) 

plugins  from  the  Adobe  GoLive  2.x  Plugins  folder 

2 Insert  the  Adobe  GoLive  CD  into  your  CD-ROM  drive. 

3 Double-click  the  installer  icon. 

4 Follow  the  instructions  on  the  screen.  When  the  installation  is 
complete,  copy  contents  of  the  Plugin  folder  for  the  browser 
you’ll  be  using  to  Adobe  GoLive’s  Plugin  folder  (which  you’ll  find 
in  the  same  place  as  the  Adobe  GoLive  application). 


With  Adobe  GoLive,  you  can  both  create  and  manage  Web  pages. 
That  means  you  can  start  either  by  creating  individual  pages  or  by 
blocking  out  the  structure  of  a new  site — or  some  combination  of 
the  two.  You  can  move  back  and  forth  between  these  modes  when- 
ever you  want. 

In  this  QuickStart  Guide,  you’ll  begin  by  working  bottom-up  and  cre- 
ate a personal  homepage.  You’ll  include  text,  graphics,  and  multime- 
dia, as  well  as  identify  the  places  on  the  page  from  which  you’ll  link 
to  others.  After  you’ve  created  some  content,  you’ll  continue  to  the 
advanced  features  and  start  thinking  of  the  organization  of  the  other 
pages  that  will  make  up  the  site.  Part  3 — Using  Advanced  Features, 
later  in  this  chapter,  introduces  this  top-down  approach. 


When  you  work  bottom-up,  you  build  individual  pages firstand  then 
organize  them  intoa  site.  Forexample,  if  you’re  designinga  personal 
homepage,  you  probably  already  have  a good  idea  of  what  to  in- 
clude: your  resume,  goals,  and  personal  interests.  You  might  then 
want  to  break  these  down  further;  your  resume  could  include  work 
history  and  samples  of  what  you’ve  done  on  other  pages.  You  may 
want  to  lay  out  the  first  page,  inserting  text  about  who  you  are, 
graphics  (like  a photo  of  yourself),  or  multimedia  elements  (perhaps 
a clip  from  a favorite  movie).  At  any  time,  you  can  stop  working  on 
one  page  and  start  another. 
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The  Main  Window 


After  you’ve  created  some  pages,  you’ll  want  to  bring  them  together 
and  insert  links.  Adobe  GoLive  will  helpyou  manage  linkingand  also 
give  you  a snapshot  of  how  the  site  looks. 

To  repeat,  at  any  time  you  can  switch  from  one  style  of  working  to 
the  other. 


Launch  Adobe  GoLive  (and  fill  in  your  activation  key  if  you  haven’t  al- 
ready). Adobe  GoLive  opens  in  the  Layout  mode,  where  you’ll  do 
most  of  your  work: 


Along  the  top  of  the  window  are  tabs  for  Adobe  GoLive’s  different 

modes: 

• Layout  Editor,  where  you  enter  content  and  where  Adobe  GoLive 
starts 

• Frame  Editor,  where  you  create  and  manage  frame  sets 

• EITML  Source  Editor,  which  shows  you  the  HTML  that  makes  up 
your  page  and  which  you  can  examine  and  edit 

• EITML  Outline  Editor,  which  shows  your  HTML  and  is  structured 
like  an  outline  with  sections  you  can  expand  or  collapse 

• WebObjects  Declaration  Editor  (which  isn’t  present  when  you 
choose  the  basic  installation) 

• Layout  Preview,  where  you  can  see  what  your  finished  page  will 
look  like 


Making  First  Steps  with  Adobe  GoLive 
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Your  First  Page 


The  Palette 


• Frame  Preview,  which  shows  what  your  completed  frames  and 
frame  sets  will  look  like 

At  the  bottom  right  of  the  window  is  a popup  menu  where  you  set 
the  width  of  your  page. 


As  with  other  WYSIWYG  Web  editors,  Adobe  GoLive  will  let  you  enter 
and  format  text  just  as  you  would  with  a word  processor.  You  can  also 
lay  out  your  page  with  the  precision  of  a desktop  publishing  pro- 
gram. That  means  you  insert  various  objects — text,  graphics,  and 
multimedia — exactly  where  you  want  them  and  get  a good  idea  of 
how  they’ll  look  in  a browser.  Better  yet,  you  can  preview  multime- 
dia objects  like  QuickTime  movies  and  Java  applets  right  in  the  Lay- 
out mode.  You  don’t  have  to  use  a browser. 


In  addition  to  the  main  window,  when  you  launch  Adobe  GoLive,  it 
opens  the  Palette  window,  which  looks  like  this: 


(If  the  Palette  window  is  not  open,  choose  Palette  from  the  Window 
menu  to  open  it.) 

The  Palette  contains  icons  for  the  objects  you  can  place  on  you  r page. 
Click  the  Palette’s  first  tab  (if  it  isn’t  clicked  already)  to  see  the  Basic 
Tags  objects. 

Here’s  a key  idea:  You  work  with  Adobe  GoLive  by  dragging  objects 
from  the  Palette  and  dropping  them  onto  your  page. 
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The  Layout  Grid  You  can  lay  out  Web  pages  by  typing  text  and  placing  images  directly 

on  your  page,  or  you  can  use  the  Layout  Grid  to  place  objects  pre- 
cisely on  a page.  You  can  also  combine  the  two  methods  on  a single 
page  by  typing  text  and  placing  objects  outside  a grid.  The  grid  auto- 
matically expands  to  accommodate  the  size  of  the  objects  you  place 
on  it.  You  can  also  enlarge  it  by  selecting  it  and  dragging  the  length 
of  the  handle. 

You  don’t  have  to  use  a Layout  Grid  that  spans  the  entire  length  of 
the  page.  (Actually,  using  Layout  Grids  is  optional  on  a page-by-page 
basis,  but  it  is  much  more  convenient  to  do  so.)  Instead,  you  can  mix 
and  match  Layout  Grids  and  normal  HTML  for  design  flexibility  and 
smaller  HTML  files. 


To  avoid  spacing  problems  when  the  page  is  displayed  in  the 
browser,  don’t  put  multiple  Layout  Grids  side  by  side.  They  will 
separate  if  the  browser  window  is  made  wider  than  the  com- 
bined width  of  the  grids. 


Let’s  start  by  putting  some  text  and  a horizontal  rule  on  the  page: 

1 Go  to  the  Palette  and  locate  the  Layout  Grid  icon. 

2 Hold  down  the  mouse  button  and  drag  the  Layout  Grid  icon  to 
your  page  (or  double-click  the  icon  in  the  Palette). 

Release  the  mouse  button.  The  grid  is  now  on  your  page  something 
like  this: 


Layout  [~1  ) l~H  |~  Source  a)  -ii  a) ~ Preview  j 


^ [2  Welcome  to  Adobe  GoLive  4 


To  repeat,  what  you’ve  just  done  is  the  basic  method  for  inserting  ob- 
jects into  your  page:  Locate  an  object  on  the  Palette  and  drag  it  to 
where  you  want  on  your  page. 


The  Layout  Grid 
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Now  add  text: 

1 Go  back  to  the  Palette  and  locate  the  Layout  Text  Box  icon. 

2 Hold  the  mouse  button  down  and  drag  the  Text  Box  icon  onto 
your  grid  (or  click  the  edge  of  the  Layout  Grid  and  double-click 
the  icon  in  the  Palette).  Position  it  at  the  top  to  act  as  the  main 
heading. 

3 Place  the  cursor  within  the  text  box.  (It  will  change  into  an  I- 
Beam.) 

4 Enter  “My  Home  Page.” 

Here’s  what  the  page  looks  like  (more  or  less): 


Lagout  |TO  EH]  Source  m)  _Ti  a]'  Preview  j 
^ 2)  Welcome  to  Adobe  GoLive  4 


My 

Home 

Page 

■ 

i 

■ 

You’ll  want  to  reposition  the  text  box  and  make  “My  Home  Page” 
bold,  larger,  and  properly  aligned.  Here’s  how: 

1 Select  the  Layout  Grid  by  clicking  one  of  its  edges;  handles  ap- 
pear on  the  bottom  and  on  the  right  side. 

2 Drag  the  handles  to  stretch  the  grid  over  the  width  of  the  window. 

3 Select  the  layout  text  box  by  clicking  one  of  its  edges;  handles  ap- 
pear on  the  bottom  and  on  the  right  side. 
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4  Drag  the  handles  until  the  layout  text  box  is  a convenient  size. 


□ untitled. html - 

Layout  |~1^  l~FlT~  Source  eO  an  aT"  Preview  aiBl 

t>  U)  Welcome  to  Adobe  GoLive  4 [zl  t 


My  Home  Page 

5 If  you  need  to  reposition  any  object,  de-select  it  and  move  the 
cursor  to  any  one  of  its  edges.  The  cursor  turns  into  a hand.  Hold 
the  mouse  button  down  and  drag  the  object  box  to  where  you 
want  it. 

Alternatively,  you  can  select  the  object  and  move  it  one  pixel  at 
a time  by  holding  the  Option  key  and  pressingthe  Left,  Right,  Up, 
or  Down  Arrow  key. 

6 Select  the  text  “My  Home  Page”  in  the  usual  Mac  way. 

7 Go  the  Format  menu  and  choose  Fteader  7. 

8 Go  the  Format  menu  and  choose  Alignment,  then  Center. 

Instead  of  using  menus,  you  could  make  the  same  changes  with  the 
icons  on  the  toolbar — for  example,  hv  choosing  I ;|  for  the 

first-level  header,  and  [E  for  center  alignment. 

Now  let’s  add  a horizontal  rule: 

1 Go  back  to  the  Palette  and  locate  the  Line  icon. 

2 Hold  the  mouse  button  down  and  drag  the  Line  icon  onto  your 
grid. 

Position  it  somewhere  under  the  text. 
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The  Color  Palette 


Your  screen  should  look  something  like  this: 


Layout  I~1 ) l~H]~  Source  ml  an  a) ' Preview  □ i El 

t>  2]  Welcome  to  Adobe  GoLive  4 [^]  ( 


My  Home  Page 

-L  — ■ — _ 

m 

Before  we  add  other  objects,  let’s  add  color  to  what  we  already  have. 
We’ll  change  the  colors  of  both  the  background  and  the  text  we’ve 
entered.  Once  again,  we’ll  use  drag  & drop,  but  this  time  for  the  Color 
Palette,  which  looks  like  this: 


The  Color  Palette  has  seven  tabs  with  different  color  spaces;  the  de- 
fault is  the  system  tab  (selected  here);  it’s  always  wise  to  use  the 
browser-safe  colors  that  will  prevent  your  colors  from  dithering 
across  platforms.  These  colors  reside  in  the  sixth  tab  from  the  left 
(the  one  with  the  Roman  numeral  “I”). 
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To  change  your  page’s  background  color: 

1 Go  to  the  Window  menu  and  choose  the  Color  Palette  (if  it  isn’t 
opened). 

2 Go  to  the  Color  Palette  and  click  on  a color  to  select  it.  The  color 
will  appear  on  the  Color  Preview  Pane  in  the  upper  part  of  the 
Color  Palette. 

3 With  the  mouse  button  up,  move  the  cursor  to  the  Color  Preview 
Pane. 

4 With  the  mouse  button  down,  drag  the  color  from  the  Color  Pre- 
view Pane  to  the  Page  icon  at  the  upper  left  corner  of  the  Layout 
window. 

5 When  the  Page  icon  highlights,  release  the  mouse  button  and  the 
background  color  changes. 

To  change  text  color: 

1 Select  the  text  “My  Home  Page.” 

2 Go  to  the  Window  menu  and  choose  Color  Palette  (if  it  isn’t 
opened). 

3 Go  to  the  Color  Palette  and  click  on  a color  to  select  it.  The  color 
will  appear  on  the  Color  Preview  Pane  in  the  upper  part  of  the 
Color  Palette. 

4 Move  the  cursor  to  the  Color  Preview  Pane. 

5 With  the  mouse  button  down,  drag  from  the  Color  Preview  Pane 
to  the  selected  text. 

6 Release  the  mouse  button  and  the  text  color  changes. 


The  Inspector  You  can  continue  adding  objects  to  your  page,  but  before  that,  you’ll 

need  to  know  how  to  examine  and  change  the  attributes  of  the  ob- 
jects you  insert.  You  do  that  with  the  Inspector,  a context-sensitive 
window  whose  information  changes  depending  on  what  you  have 
selected  at  any  given  time. 

To  use  the  Inspector. 

1 Go  to  the  Window  menu  and  choose  Inspector. 


The  Inspector 
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2 Click  on  the  Page  icon  in  the  upper  left  corner.  The  Inspector’s 
name  changes  to  Page  Inspector  and  looks  like  this: 


Here  you  see  information  about  your  page — for  example,  its  default 
color  for  text  and  links.  You  can  also  see  the  background  color  for 
your  page.  To  change  any  of  these  colors  from  here,  click  on  the 
small  color  preview  panes  beside  each  attribute.  The  Color  Palette 
module  opens  and  you  choose  a new  color. 

To  see  that  the  Inspector  is  truly  context  sensitive,  go  back  to  your 
page  and  click  on  the  horizontal  rule  to  select  it. 
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Inserting  Graphics 


The  Inspector  changes  to  the  Line  Inspector  and  looks  like  this: 


Enter  various  values  into  the  Width  and  Height  boxes;  Adobe  GoLive 
updates  the  Layout  window  immediately. 

The  Inspector  is  one  of  the  key  features  of  Adobe  GoLive:  it  always  dis- 
plays information  about  the  object  you  have  currently  selected.  So 
rather  than  having  to  clickthrough  a series  of  menus  and  sub-menus 
to  change  the  attributes  of  an  object,  you  can  rapidly  make  changes 
via  the  Inspector. 


You  also  use  the  Palette  and  the  Inspector  together  to  insert  and  ad- 
just graphics.  Adobe  GoLive  assumes  that  you  have  already  created 
the  graphics  you’ll  need  in  some  other  application  and  that  they  are 
available  in  typical  Web-compatible  formats: 

• GILs  or  PNG  in  indexed  colors  at  72  dpi  resolution,  saved  with 
the  typical  .gif  or  .png  file  name  extension 

• JPEGs  in  RGB  at  72  dpi  resolution,  saved  with  the  typical  .jpg  hie 
name  extension 

Here’s  how  to  insert  them: 

1 Go  to  the  Palette  and  locate  the  Image  icon. 

2 Drag  it  to  the  location  on  the  grid  you  want.  (If  you  are  not  using 
the  Layout  Grid,  the  Image  icon  will  appear  at  the  current  loca- 
tion of  the  cursor.) 

Select  the  Image  icon  on  your  page. 
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Adjusting  Your 
Graphic 


Other  Objects 
You  Can  Use 


Saving  Your  Work 


4 Open  the  Inspector,  it  is  now  titled  the  Image  Inspector  and  dis- 
plays a series  of  tabs. 

5 Select  the  Basic  tab.  The  Source  field  will  show  “Empty  Reference” 
because  you  have  not  yet  selected  the  graphic  to  insert  here. 

6 Click  Browse.  A file  selection  dialog  box  will  open. 

7 Navigate  to  the  file  you  want  and  click  Open.  Your  graphic  will  re- 
place the  Image  icon. 

You  also  could  have  typed  the  path  name  and  file  name;  however, 

it’s  simpler  to  let  Adobe  GoLive  do  the  work. 


The  Image  lnspector\e\s  you  change  various  attributes  of  your  i mage. 
The  Basic  tab  has  fields  for  your  graphic’s  height,  width,  and  align- 
ment. Othertabs  have  fields  for  alternate  text,  border  width,  creating 
links,  and  making  the  graphic  into  a client-side  image  map.  Experi- 
ment with  the  other  settings. 


Move  your  mouse  over  the  Palette’s  objects;  at  the  bottom  of  the  Pal- 
ette window,  you’ll  see  the  name  of  each  one.  These  include: 

• tables 

• JavaScripts 

• comments 

• spacers  (Netscape  Navigator-only) 

• scrolling  marquees  (Internet  Explorer-only) 

• new  HTML  tags  that  Adobe  GoLive  doesn’t  yet  know  about 

Experiment  with  these  features  if  you  wish  after  reading  about  them 
in  the  Adobe  GoLive  User  Manual. 


As  with  most  other  programs,  Adobe  GoLive  does  not  automatically 
save  your  work.  It’s  good  practice  to  periodically  do  so  yourself  and 
avert  potential  data  loss. 

When  you  save  your  pages,  remember  to  give  them  appropriate 
names  for  the  platform  that  will  be  serving  your  pages.  For  example: 

• DOS-based  server  machines  can  handle  only  up  to  eight  charac- 
ters in  their  names,  plus  three  more  in  their  extensions  (for 
example,  mypage.htm).  This  file  name  format  is  also  preferable 
if  you  stage  the  site  for  previewing  on  a local  server. 
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• UNIX  server  machines  do  not  accept  names  with  any  blanks, 
spaces,  or  special  characters  like  “%”,  etc.  If  in  doubt,  ask 
your  server  administrator  for  a list  of  rules  for  his  server. 


The  Site  Window: 
Gatheringand  Storing 
Resources 


To  this  point,  we’ve  worked  with  just  a single  page  that  included  text, 
graphics,  and  multimedia  elements.  As  you  add  more  pages  and  ob- 
jects to  a site,  you  can  easily  lose  track  of  the  resources  you  use. 
Adobe  GoLive’s  Site  Window  helps  you  see  what  you’re  using,  based 
on  a “one  site,  one  folder”  principle.  In  other  words,  any  page  you 
create  and  any  image  or  multimedia  item  you  place  on  a page  is 
stored  in  the  site  folder. 

To  show  you  how  this  works,  you  first  need  to  save  the  page  you’ve 
been  working  on  to  the  folder  you’ll  use  for  the  site  you’re  building. 
Here’s  how: 

1 Go  to  the  Fite  menu  and  choose  Save. 

2 In  the  subsequent  dialog  box,  create  a new  folder  (call  it  “Quick- 
Start  Test  Site”). 

3 Save  the  page  you’ve  been  working  on  as  index.html.  This  is  the 
standard  file  name  most  Internet  Service  Providers  require  you  to 
use  for  your  homepage. 

4 Close  the  page. 

5 Create  a second  page,  named  resume.html. 

6 Add  some  content-for  example,  a Layout  Grid,  layout  text  boxes, 
and  text. 

7 Save  the  new  page  to  the  “QuickStart  Test  Site”  folder  and  close  it. 

Now  you’re  going  to  create  a site  by  importing  the  folder  you  have 
just  saved  your  hies  to.  You  will  store  all  your  resources  there — in- 
cluding your  new  pages,  multimedia  objects,  and  graphics. 


Creating  a Site  by 
Importing  a Folder 


1 Go  to  the  File  menu  and  choose  New  Site  > Import  from  Folder. 

2 A dialog  box  appears,  prompting  you  to  indicate  which  folder 
you  want  to  use  and  what  the  homepage  should  be. 

3 Click  both  Browse  buttons  and  locate  the  folder  and  the 
index.html  page  you  have  saved  in  previous  steps. 

4 When  you  are  done,  click  Import. 

5 Name  the  new  site  something  like  “QuickStart.Site”. 

6 Save  it  in  the  same  folder  where  you  saved  index.html. 
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7 Your  site  document  should  now  look  something  like  this. 


8 Two  green  bug  icons  may  appear  in  the  Site  Window — one  at  the 
top  and  one  next  to  the  file  in  the  list.  Don’t  worry  if  this  hap- 
pens; this  bug  is  easily  fixed. 

9 Sit  back,  relax,  and  try  to  recall  what  you  have  done  to  the  “bug- 
gy” page. 

10  Have  you  made  your  guess?  You  saved  the  page  that  contains  it 
(actually  the  page  only  contains  a reference  to  the  image),  but 
you  haven’t  moved  the  image  into  the  site  folder,  so  the  page 
can’t  find  it. 

Tip:  This  bug  doesn’t  occur  if  the  image  was  in  the  same  folder 

as  the  page  when  you  created  the  link. 

11  Go  to  the  Finder  and  locate  the  image  file,  then  drag  it  at  the  Site 
Window  and  drop  it  there.  The  image  file  will  now  appear  in  the 
Site  Window. 

12  Double-click  index.htmi  to  open  it. 

13  Locate  the  image  in  the  page.  Where  the  image  used  to  be,  there 
is  only  an  image  placeholder  (the  icon  with  the  question  mark). 

14  You  will  now  use  Point  & Shootto  fix  the  “lost  image”  problem. 


34 


Adobe  GoLive  QuickStart  Guide 


CHAPTER  2 


Managing  Web  Pages  and 
Media  in  the  Site  Window 


15  Command-click  the  image  placeholderand  drag  atthe  image  file 
in  the  Site  Window  (see  the  illustration  below). 


16  Release  the  mouse  button  when  the  small  file  icon  and  the  file 
name  highlight.  The  interconnecting  line  blinks  twice  and  the 
image  reappears.  You  will  also  notice  that  the  “bugs”  have  disap- 
peared from  the  Site  Window.  This  is  because  your  site  no  longer 
has  broken  links. 


The  Site  Window  is  a key  element  in  Adobe  GoLive:  It  shows  the  folder 
where  you  store  everything  you  need  to  create  a site  (such  as  pages, 
graphics,  and  movies). 

So,  whatever  item  you  want  to  use  in  your  site,  be  sure  to  drag  it  to 
the  Site  Window.  There  are  some  important  reasons  to  store  items  in 
the  Site  Window. 

• You  can  use  Adobe  GoLive’s  Point  & Shoot  feature  to  easily  link 
to  them. 

• The  Site  Window  provides  an  easy  way  to  manage  resources. 
Inspectors  appear  for  each  selected  item  to  let  you  preview  its 
content,  rename  it,  choose  a Finder  label,  and  use  other  file- 
related  options. 

• The  Site  Window  is  Adobe  GoLive’s  window  to  the  Finder.  Instead 
of  locating  files  in  Finder  windows  or  file  selection  dialogs,  you 
simply  double-click  a page  directly  within  the  application  to 
open  it. 


The  Site  Window:  Gathering  and  Storing  Resources 
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• Adobe  GoLive  manages  all  links  for  you  to  maintain  the  integrity 
of  your  site.  Whenever  you  move  or  rename  an  item  in  the  Site 
Window,  you  will  be  prompted  to  automatically  update  the 
links. 

We  will  now  create  a folder  in  the  Site  Window  to  see  how  Adobe 
GoLive  interacts  with  the  Finder. 

Here’s  how  you  create  a folder: 

1  Go  to  the  Palette  and  click  the  Site  tab. 


2 Locate  the  Folder  item  and  drag  it  onto  the  Site  Window. 

3 You  have  just  created  a new  folder.  Open  the  Inspector  window, 
now  titled  Folder  Inspector,  and  name  the  new  item.  (You  can 
also  rename  the  folderthe  Macintosh  way:  Click  the  name  of  the 
folder  in  the  Site  Window  and  type,  then  press  Return.) 

4 Drag  the  resume. hmtl  onto  the  new  folder. 

5 When  prompted  to  confirm  whether  you  want  to  have  all  refer- 
ences updated,  click  OK.  Adobe  GoLive  "knows"  the  location  of 
each  object  in  the  Site  Window  and  needs  to  update  the  links. 

6 Click  the  small  triangle  next  to  the  folder  icon  to  open  the  folder 
and  view  its  content. 

7 Switch  to  the  Finder  and  open  the  site  folder.  You’ll  notice  that  a 
new  folder  has  appeared. 

8 Open  the  new  folder  and  view  its  content.  You’ll  find  the  re- 
sume.html  page  you  moved  in  the  Site  Window. 

This  action  demonstrates  how  tightly  the  Site  Window  is  integrated 
with  the  Macintosh  Finder:  If  you  move  a file  in  Adobe  GoLive,  the 
same  happens  in  the  Finder.  For  your  everyday  work,  this  means  that 
you  don’t  have  to  resort  to  the  Finder  to  manage  the  files  that  make 
up  your  site;  you  can  do  it  all  in  Adobe  GoLive.  You  will  benefit  from 
this  capability  later  when  your  links  are  in  place. 
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The  Site  Window  also  lets  you  view  the  content  and  general  proper- 
ties of  the  files  it  contains. 

Here’s  how  you  view  the  content  of  a page: 

1 Select  index.html  in  the  Site  Window. 

2 Open  the  Inspector  window,  now  titled  File  Inspector,  and  click 
the  Content  tab.  You’ll  see  a thumbnail  preview  of  your  page. 


3  Click  the  Page  and  File  tabs  to  view  other  properties,  such  as 
HTML  title,  Finder  Label,  file  size,  and  many  more. 


Creating  Links  Although  you  now  have  two  pages  with  varying  amounts  of  content, 

a site  visitor  cannot  get  from  one  to  the  other.  You  need  to  add  some 
links.  Adobe  GoLive  provides  several  ways  of  linking,  butwe’ll  restrict 
ourselves  to  using  Point  & Shoot,  which  is  the  most  intuitive  way  of 
creating  links  in  Adobe  GoLive. 


Inserting  Text  to  Link 
From 


First,  you  have  to  create  the  text  that  site  visitors  will  click  on  to  go  to 
another  page: 


Go  to  the  Site  Window,  locate  the  index.html  icon,  and  double- 
click. The  page  opens  for  editing. 

Go  to  the  Palette,  locate  the  Layout  Text  Box  icon,  and  drag  it  to 
the  Layout  Grid  you’ve  inserted  before. 

Place  the  cursor  in  the  text  box  and  enter  “Resume”. 
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Linking  with  the  site  Here’s  how  you  create  a link  from  selected  text  using  Point  & Shoot: 

Window  i in  index.html,  select  “Resume”  so  that  it’s  highlighted. 

2 Bring  the  Site  Window  forward  and  locate  the  resume.html  icon. 

3 Command-click  the  selected  text  (a  small  curly  line  appears  on 
the  cursor)  and  dragto  the  resume.html  page  icon  in  the  Site  Win- 
dow. The  screenshot  below  illustrates  this  process. 


4 Release  the  mouse  button  when  the  small  page  icon  and  the  file 
name  highlight.  The  interconnecting  line  blinks  twice  and  the 
text  is  now  displayed  in  blue  and  underlined. 

5 You  have  just  created  your  first  hyperlink  in  Adobe  GoLive. 

6 Go  back  to  the  source  of  the  link  and  Control-click  the  Resume 
text  item  to  try  out  the  new  link. 

7 The  resume.html  page  opens  on  top  of  the  other  windows. 


Unlike  browsers,  which  open  linked  pages  in  the  same  window, 
Adobe  GoLive  opens  new  pages  in  a new  window. 


Linking  from  a Graphic  In  addition  to  linking  from  text,  you  can  also  link  from  a graphic. 

Here’s  how: 

1 Open  index.html  and  locate  the  graphic  you  inserted  earlier. 

2 Select  the  graphic.  The  Inspector  is  now  titled  the  Image  Inspector. 

3 In  the  Image  Inspector,  click  the  Link  tab. 

4 Select  the  New  l ink  fccf  icon. 

5 Find  the  Point  & Shoot  button  in  the  Image  Inspector.  It’s  located 
below  the  URL  text  box  at  the  top  of  the  main  window  area. 
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6 Click  the  Point  & Shoot  button  and  drag  to  the  resume.html  page 
in  the  Site  Window. 

7 Release  the  mouse  button  when  the  small  page  icon  and  the  file 
name  highlight.  The  interconnecting  line  blinks  twice  and 
resume.html  appears  in  the  URL  text  box. 

8 Go  back  to  index.html.  A blue  border  appears  around  the  image 
to  indicate  that  it  is  a clickable  hyperlink. 

9 Control-click  the  image. 

10  The  resume.html  page  will  open  in  a separate  window  on  top  of 
index.html. 


Remember,  Adobe  GoLive  opens  new  pages  in  a new  window, 
unlike  browsers,  which  open  linked  pages  in  the  same  window. 

When  site  visitors  click  the  graphic,  it  will  take  them  to  the  second 
page. 

If  you  find  the  blue  border  around  the  image  annoying,  here’s  how 
to  remove  it: 

1 Click  the  image  to  select  it. 

2 Go  to  the  Image  Inspector  and  click  the  Spec,  tab  rider. 

3 Locate  the  Border  checkbox  and  text  box  combination. 

4 Click  the  Border  checkbox  and  make  sure  that  “0”  appears  in  the 
text  box  next  to  it.  The  border  around  the  image  will  disappear. 

Did  you  notice  the  difference  between  linking  from  text  and  linking 
from  an  image?  You  can’t  link  from  an  image  directly  using  Point  & 
Shoot : To  repeat,  linking  from  an  image  requires  that  you  go  to  the 
Image  Inspector  and  click  the  New  Lin k button  @ before  using  Point 
& Shoot. 


Adding  Other  Media  As  we’ve  said,  theS/'fe  Window  stores  all  of  the  resources  you  need  for 

to  the  Site  Window  your  s'te-  Let's  see  h°w  wor^s  with  objects  other  than  pages: 

1 Copy  any  GIF,  PNG,  or  JPEG  graphic  file  to  the  QuickStart  Site  fold- 
er and  then  click  the  Update  button  (checkmark  icon)  in  the  Tool- 
bar. Or  drag  & drop  it  from  the  Finder  to  the  content  area  of  the 
Files  tab  in  the  Site  Window. 

2 Whichever  way  you  choose,  the  graphic  file  will  be  listed  in  the 
Site  Window. 

3 Double-click  the  index.html  icon.  The  page  will  open. 

4 Go  to  the  Site  Window  and  click  on  the  Files  tab,  if  it  is  not  open. 


Previewing  Your  Work 
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5  Drag  & drop  the  graphic’s  icon  to  your  page.  The  graphic  will  ap- 
pear on  the  page. 

You  could  have  entered  the  graphic  as  you  did  previously — that  is, 
by  using  the  Graphic  icon  from  the  Palette.  Adobe  GoLive  gives  you 
several  ways  to  perform  many  operations,  but  using  the  Site  Window 
to  insert  objects  is  particularly  convenient.  You  can  use  the  same 
technique  for  other  objects  as  well. 


Previewing  Your  Work  Now  that  the  links  are  in  place,  you’ll  want  to  test  them  by  using  ei- 
ther Adobe  GoLive’s  Layout  Preview  mode  or  your  browser. 

To  use  Adobe  GoLive’s  Layout  Preview  mode: 

1 Open  the  page  you  want  to  preview — in  this  case,  index.html. 

2 In  the  document  window,  click  the  Layout  Preview  tab  (the  sec- 
ond from  right,  labeled  Preview). 

3 Adobe  GoLive  shows  a preview  of  your  page. 

4 Go  to  the  Inspector  window,  now  titled  Layout  View  Controller, 
and  locate  the  Root  menu. 

5 Select  an  option  from  the  Root  menu — for  example,  Navigator  4 
(Win) — to  see  how  your  page  displays  in  Navigator  4 on  a Win- 
dows platform.  Switch  between  the  menu  options  and  observe 
how  your  page  changes  in  Preview  mode. 

You  will  notice  that  the  text  “grows”  whenever  you  switch  to  a 
Windows-based  browser.  This  feature  shows  the  vast  differences 
between  browsers  and  platforms — a fact  you  should  keep  in 
mind  when  designing  your  pages. 

Because  browsers  and  platforms  perform  their  own  ways,  a page 
that  looks  fine  on  one  system  can  look  terrible  on  another.  It’s  al- 
ways a good  idea  to  use  the  Root  menu  options  in  the  Layout 
View  Controller  or,  better  yet,  try  out  your  pages  on  as  many  dif- 
ferent browsers  and  platforms  as  you  can. 

6 Locate  the  Resume  link,  just  as  you  would  in  a browser.  The  cur- 
sor turns  into  a hand  when  you  are  over  the  link. 

7 Click  the  link  and  resume.html  opens  in  a new  window. 

To  use  a browser: 

1 Go  to  the  Edit  menu  and  choose  Preferences. 

2 Select  the  Browsers  icon  (if  it  isn’t  visible,  scroll  to  it). 

3 In  the  Browsers  settings,  you  can  c\\ck  Add  and  then  manually  se- 
lect the  browser  you  want.  Or  you  can  click  Find  All  and  let  Adobe 
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GoLive  automatically  find  all  the  browsers  installed  on  your  hard 
drive. 

4  If  you  have  more  than  one  browser,  click  to  select  the  checkbox 
beside  the  one  you  want  to  be  the  default  (see  the  following  il- 
lustration). Click  OK. 


5 Close  the  Preferences  dialog  box  to  return  to  your  page. 

6 Locate  and  click  the  Show  in  Browser  icon  at  the  extreme  right  of 
the  toolbar.  (The  icon  varies  with  each  browser.)  Your  browser 
will  launch  and  display  your  page. 

7 Locate  the  Resume  link  on  the  browser’s  display. 

8 Click  the  link  and  resume.html  opens  in  the  same  window. 


Part  3 — Using  Advanced  Features 

This  section  introduces  some  of  the  advanced  features  of  Adobe 
GoLive,  including  its  multiple  image  selection  and  link  creation  op- 
tions, the  site  designer,  and  FTP. 


Multiple  Ways  to  Insert  Graphics 
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Multiple  Ways  to 
Insert  Graphics 


Multiple  Ways  to 
Create  Links 

Linking  Directly  from 
Selected  Text 

Linking  from  Inspectors 


After  working  with  Adobe  GoLive  for  some  time,  you’ll  appreciate  its 
alternative  ways  of  accomplishing  a particular  task.  The  following  list 
sums  up  your  options  for  inserting  images: 

• You  can  insert  them  directly  via  drag  & drop  from  the  Site  Win- 
dow. 

• You  can  insert  an  image  placeholder  from  the  Palette,  then 
Command-click  it  and  Point  & Shoot  at  an  image  in  the  Site  Win- 
dow. 

• You  can  insert  an  image  placeholder  from  the  Palette  and  use 
any  of  the  following  options  in  the  Image  Inspector. 

- The  Source  text  box  will  show  “Empty  Reference”  when  you 
have  not  yet  selected  a file  name  to  insert  there.  You  can  type 
directly  in  this  text  box  to  specify  a folder  path  and  an  image 
file  name.  The  folder  path  is  necessary  only  if  the  image  file 
resides  in  another  folder. 

- Clicking  the  Browse  button  opens  a file  selection  dialog  box. 
Navigate  to  the  file  you  want  and  click  Open.  Adobe  GoLive 
will  insert  the  file’s  name  into  the  URL  field  and  replace  the 
image  placeholder  with  the  image. 

- You  can  click  the  Point  & Shoot  button  and  drag  to  an  image 
in  the  Site  Window  to  have  Adobe  GoLive  replace  the  image 
placeholder  with  the  image. 


Adobe  GoLive  also  gives  you  various  options  for  creating  links  from 
selected  text  or  images.  The  following  sections  present  an  overview 
of  your  options. 


As  explained  earlier  in  this  chapter,  you  can  Command-click  selected 
text  and  drag  to  a page  icon  in  the  Site  Window. 


In  a Web  page,  only  images  and  text  can  have  clickable  links,  so  only 
two  Inspectors  in  Adobe  GoLive  offer  link  creation  tools:  the  Image  In- 
spector and  the  Text  Inspector.  Both  Inspectors  have  the  same  set  of 
options  for  creating  links: 

• The  URL  text  box  will  show  “Empty  Reference”  when  you  have 
not  yet  selected  a file  name  to  insert  there.  You  can  type  directly 
in  this  text  box  to  specify  a folder  path  and  a file  name.  The 
folder  path  is  necessary  only  if  the  destination  file  resides  in 
another  folder. 
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Create  a Whole  Site: 
Working  Top-Down 
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• Clicking  the  Browse  button  opens  a file  selection  dialog  box. 
Navigate  to  the  file  you  want  and  click  Open.  Adobe  GoLive  will 
insert  the  file’s  name  into  the  URL  field. 

• The  Point  & Shoot  button  lets  you  click  on  and  drag  a page  in 
the  Site  Window. 


You  can  also  drag  a page  icon  (not  an  image  or  other  media  item) 
from  the  Site  Window  and  drop  it  on  selected  text  to  create  a link. 
However,  this  shortcut  is  not  available  for  placing  a link  on  an  image. 


Adobe  GoLive  lets  you  create  a site  top-down,  which  means  you 
structure  your  site  before  creating  content. 

Working  top-down  with  Adobe  GoLive,  you  can  insert  placeholders 
for  all  your  pages.  At  any  time,  however,  you  can  change  your  mind 
about  what  to  include.  You  can  also  temporarily  stop  structuring 
your  site  and  start  adding  content.  Here’s  how: 

1 Go  to  the  File  menu  and  choose  New  Site  > Blank. 

2 In  the  subsequent  dialog  box,  name  the  site  something  like 
QuickStart.Site. 

3 Leave  the  Create  Folder  checkbox  selected  to  have  Adobe  GoLive 
create  a new  site  folder.  Click  Save. 

4 Adobe  GoLive  will  create  a new  folder  named  QuickStart.Site  f 
with  the  following  content: 

- The  QuickStart.Site.K site  document:  This  is  the  document 
that  displays  in  the  Site  Window. 

- The  QuickStart.Site  folder:  This  is  the  folder  that  stores  your 
pages  and  media.  Its  content  appears  in  the  Files  tab  of  the 
Site  Window.  When  you  create  a new  site,  it  already  contains 
a blank  homepage,  titled  index.html. 

- The  QuickStart.Site.data  folder:  This  folder  holds  things  that 
you  need  to  build  and  maintain  your  site  but  that  don’t  need 
to  be  uploaded.  For  more  details,  please  see  Chapter  77,  Man- 
aging Web  Sites  with  Adobe  GoLive,  starting  on  page  605. 


Building  Your  Site  with  Site  View 
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Building  Your  Site 
with  Site  View 


5 The  Site  Window  appears,  with  a homepage  already  in  place.  It 
will  look  something  like  this: 


Now  you’re  ready  to  design  a site. 


In  working  top-down,  you're  going  to  decide  what  pages  your  site 
will  have  and  then  return  later  to  add  content  to  them.  Although 
you’ll  be  adding  placeholders  for  pages,  you  can  change  your  mind 
any  time  about  what  should  go  where. 

Suppose  you  want  your  site  to  show  visitors  your  resume,  your  career 
goals,  and  your  interests.  Suppose  again  that  underyour  resume  you 
want  additional  pages  for  your  work  history  and  some  samples  of 
your  work.  Here’s  how  to  add  placeholders  for  those  pages: 

1 In  the  Site  Window,  click  the  Site  tab. 

2 Click  the  “eye”  in  the  upper  right  corner  of  the  document  window 
to  display  the  Site  View  Controller. 

3 Click  the  Display  tab  and  enable  the  File  Name  radio  button  in 
the  Item  Label  group  of  options.  (This  displays  the  true  file  names 
rather  than  the  page  titles.) 

4 Move  the  mouse  cursor  over  the  solitary  symbol  at  the  top  of  the 
window.  This  is  the  index.html  page  that  Adobe  GoLive  inserted 
when  you  created  the  new  site. 

5 A small  document  icon  (we’ll  call  it  a “Create  New  Page”  live  but- 
ton here)  appears  at  the  bottom  of  the  homepage  symbol,  as 
shown  below. 
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This  is  a “Create  New  Page”  live  button. 


6 Click  the  “Create  New  Page”  live  button  toadd  a new  page.  Adobe 
GoLive  has  created  a new  page  symbol,  titled  New2.html,  that  is 
the  “child”  of  index.html.  This  action  creates  an  empty  page  in  a 
new  folder  named  New  Pages  in  the  Site  Window. 

7 Now,  move  the  mouse  cursor  over  the  new  page  symbol.  Four 
Add  Page  Handles  appear  at  the  top,  left,  right,  and  bottom  of 
the  new  page  symbol. 

8 Click  the  right  or  left  “Create  New  Page”  live  button  to  create  a 
new  page  that  is  a sibling  of  the  first  page  you  have  just  created. 
The  new  page  is  named  New  21.html  because  it’s  the  first  page 
you  create  on  the  second  level  of  the  site’s  hierarchy. 

9 Repeat  this  step  once,  so  that  you  have  the  index.html  and  three 
other  pages,  all  children  of  index.html  and  siblings  of  each  other. 
Your  screen  should  look  something  like  this: 
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You  now  have  a snapshot  of  the  site  and  can  see  how  the  four  pages 
relate  to  each  other. 

Because  you  want  two  separate  pages  that  will  be  sub-pages  of  the 
resume,  create  them  here. 

In  the  Site  View  window: 

1 Move  the  mouse  cursor  over  the  page  that  you’ll  use  for  your  re- 
sume. 

2 Click  the  bottom  “Create  New  Page”  live  button  to  create  a new 
page  that  is  a child  of  your  resume  page. 

3 Repeat  this  step  to  create  a second  child  page. 

Your  screen  will  resemble  the  following  screenshot: 


You  could  continue  adding,  re-arranging,  or  deleting  pages.  This 
gives  you  a chance  to  work  top-down  and  plan  your  site. 

But  switch  modes  once  again:  add  some  content  to  these  pages,  give 
them  permanent  names,  add  links  to  the  homepage  or  parent  page 
so  they’re  connected,  then  save  them: 

1 In  the  Site  View,  double-click  New2.html.  It  opens  for  editing. 

2 As  you  did  with  index.html,  add  content  about  your  resume  (con- 
tact information,  for  example)  and  a header  that  will  immediate- 
ly tell  your  visitor  about  the  page.  Keep  your  text  brief  for  now. 

3 When  you’re  done  adding  content,  select  the  page  in  the  theS/'fe 
View  and  rename  it  as  resume.html  in  the  File  tab  of  the  File  In- 
spector. 
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4 In  the  Site  View,  double-click  index.html.  It  opens  for  editing. 

5 Insert  text — for  example,  “Please  see  my  resume” — and  link  to 
resume.html  as  explained  before. 

6 Repeat  with  New 21.html,  adding  content  for  Goals. 

7 Continue  these  steps  until  you  have  added  content  to  and  linked 
all  new  pages  previously  created  in  the  Site  View. 

8 When  you’re  done,  you’ll  want  to  drag  the  files  from  the  New  Pag- 
es folder  to  move  them  to  the  same  level  as  index.html.  Here’s 
how: 

- Go  to  the  Files  tab  of  the  Site  Window. 

Locate  the  folder  New  Pages  and  click  the  small  triangle  con- 
trol to  open  it. 

Drag  or  Shift-click  to  select  the  files. 

Drag  the  files  at  the  column  head  (labeled  Name)  of  the  Files 
tab  and  drop  them  there. 

- When  prompted  to  confirm  whether  you  want  to  have  all  ref- 
erences updated,  click  OK. 

- Adobe  GoLive  will  move  the  files  now  and  update  all  links  to 
ensure  that  your  site  remains  intact. 

You  have  just  created  a site  from  scratch  and  added  basic  content 
and  hyperlinks.  You  can  now  add  more  content,  as  outlined  in  Part 
2 — Making  First  Steps  with  Adobe  GoLive. 


Using  FTP  to  Upload 
Your  Site 


FTP  (File  Transfer  Protocol)  is  the  medium  for  transferring  files  be- 
tween computers  on  the  World  Wide  Web.  Typically,  an  FTP  session 
involves  a client  and  a server.  If  you  have  already  signed  up  with  an 
Internet  Service  Provider  (ISP),  it  may  have  created  a personal  FTP  ac- 
count and  given  you  an  FTP  address,  a user  ID,  a password,  and  the 
path  to  your  personal  directory  (optional).  You  need  this  information 
to  access  the  ISP’s  server  and  upload  your  site  after  you  are  finished 
with  your  design,  so  the  ISP  can  post  it  on  its  Web  server.  If  you  are 
not  sure,  ask  the  server  administrator  for  information  on  your  FTP 
account. 


Using  FTP  to  Upload  Your  Site 
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Adobe  GoLive  features  an  easy-to-use  FTP  client  with  drag  & drop  ca- 
pability that  is  integrated  into  the  S/Ye  Window.  Before  using  FTP,  you 
need  to  make  several  settings,  including  the  FTP  address,  the  target 
directory,  your  user  ID  and  password,  and  various  communication- 
related  settings: 

1 Make  sure  that  you  have  all  communications-related  control 
panels  (PPP,  TCP/IP,  and  Modem)  set  up  properly  on  your  Macin- 
tosh. For  more  details,  please  consult  the  user  manual  of  your 
modem  or  ISDN  adapter. 

2 With  the  Site  Window  in  the  front,  click  the  Site  Settings  button 
fTTI  in  the  Site  Toolbar. 

3 The  Site  Settings  dialog  box  appears  (see  below). 

4 In  the  left  section  of  the  dialog  box,  click  the  FTP  icon. 


5 In  the  Server  text  box,  type  in  the  FTP  address  specified  by  your 
ISP  for  the  Web  server  you  want  to  upload  to. 

6 If  required,  type  in  the  directory  path  to  your  personal  folder  on 
the  Web  server  in  the  Directory  text  box. 

7 In  the  Username  text  box,  type  in  the  user  ID  that  the  server  ad- 
ministrator gave  you. 

8 In  the  Password  text  box,  type  in  the  personal  password  that  the 
server  administrator  assigned  you. 

9 Place  the  cursor  in  the  Port  text  box  and  type  in  the  number  of 
the  port  you  will  use  to  access  your  Web  server — for  example 
“21”,  which  is  the  most  common  port  specification. 
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10  If  a firewall  protects  the  FTP  server,  you  may  have  to  check  the 
Use  passive  mode  checkbox. 


an 

Click  this  icon  bar, 
followed  by  the  FTP 
tab  rider. 


Now  that  you’ve  made  the  basic  settings,  you  can  connect  to  the  FTP 
server: 

1 If  the  Site  Window  displays  a single  pane  only,  click  the  icon  bar 
in  the  upper  right  corner  of  the  window,  then  click  the  vertical 
tab  labeled  “FTP”  to  display  the  FTP  tab  in  the  right  pane. 

If  the  Site  Window  displays  two  panes,  click  the  vertical  tab  rider 
labeled  FTP  in  the  right  pane  (if  not  already  open). 

2 Click  the  FTP  Server  Connect/Disconnect  button  3EI  in  the  Site 
Toolbar  to  access  the  server. 

3 Adobe  GoLive  starts  connecting  to  the  FTP  server.  Wait  for  the 
Connected  message  to  appear  in  the  status  line  at  the  bottom  of 
the  FTP  tab. 

4 When  connected,  drag  files  or  folders  from  the  left  pane  of  the 
Site  Window  onto  the  FTP  tab,  as  the  example  below  shows. 


1 i Newsletter  Site  tdJ  y 

(.  x Files  j ‘hjsi  Site  ^ External  | Q Colors  j /4  Fontsets  j 

Gfc]|  Newsletter  | if 

CL 

^ ftp.myijp  com  / 

Name  ▼ 1 Status  1 URL 

Name  a I < 

^7  html  /MacOS8/Desktc 

airbaja.html  ■/  /MacOS8/Deskt< 

BonusPrograms....  */  /MacOS8/Deskt< 

k~\  SubscriptionFor...  /MacOS8/Desktc 

TravelingUnlimit...  /MacOS8/Desktc 

•S7  Cl  html 

airbaja.html 
BonusPrograms.... 
SubscriptionFor... 
k~\  TravelingUnlimit... 

— 

^ CJ  image  /MacOS8/Desktc 

index.html  S /MacOSS/Deskti: 

> 1^  image 

Q index.html 

9 items  | 4 \ III!  | | ► 

9 items  Connected  | 4 \ llll  | | ► 

5 This  is  all  you  need  to  do  to  upload  files  to  your  ISP’s  server.  You 
can  also  download  files  by  dragging  them  in  the  reverse  direction 
or  open  HTML  pages  in  Adobe  GoLive  by  double-clicking. 

6 When  you  are  done  copying,  click  the  FTP  Server  Connect/Discon- 
nect button  ® in  the  Site  Toolbar  one  more  time  to  terminate 
the  FTP  session. 


Summing  Up 
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In  this  QuickStart  Guide,  you’ve  done  the  following  tasks: 

• created  pages 

• added  content,  including  text  and  graphics 

• added  new  pages  and  created  a site  document 

• made  links 

• previewed  your  work 

• designed  a site 

• uploaded  files  via  FTP 

Once  you’re  comfortable  with  the  material  in  this  QuickStart  Guide, 
you’ll  want  to  learn  howto  use  frames,  insert  QuickTime  movies  and 
Java  applets,  write  JavaScripts,  build  DHTML  animations,  format  your 
document  with  Cascading  Style  Sheets,  and  much  more.  The  User 
Manual  remains  your  best  guide  to  Adobe  GoLive’s  many  features. 


Chapter  3 


General 


Adobe  GoLive  Basics 

This  chapter  describes  the  rich  functionality  built  into 
Adobe  GoLive,  the  complete  solution  for  HTML  layout, 
design,  and  Web  site  management.  The  following  pages 
outline  the  major  features  that  reduce  the  workload  on 
Web  designers,  programmers,  and  Web  masters  alike  in 
their  daily  chores.  Chapter  3 also  describes  common  con- 
trols shared  by  the  various  windows  and  palettes  used 
within  the  application. 


Adobe  GoLive  contains  virtually  everything  graphic  artists  and  pro- 
fessional publishers  are  looking  for  in  a Web  publishing  package.  It 
goes  well  beyond  the  scope  of  basic  WYSIWYG  editors  and  gives  you 
a set  of  tools  that  will  really  boost  your  productivity.  Adobe  GoLive 
provides  authoring  tools  for  users  at  any  level  of  expertise — from  the 
“newbie”  to  the  proficient  Web  programmer. 

Adobe  GoLive  is  the  first  Web  page  editor  to  abandon  overloaded 
toolbars  for  a more  user-friendly  Palette-\N\Pn-lnspector  approach. 
It’s  also  the  first  editor  to  feature  a fully  context-sensitive  toolbar.  By 
shifting  all  HTML  objects  to  the  Palette  and  introducing  context-sen- 
sitivity, Adobe  GoLive  always  offers  a tailored  set  of  functions  for  any 
given  task.  This  simplicity  lets  you  concentrate  on  the  Web  design  job 
at  hand,  rather  than  cope  with  the  complexities  of  the  user  interface. 

For  either  layout  or  raw  HTML  code,  Adobe  GoLive  supplies  the  best 
of  both  worlds.  It  also  offers  the  Outline  Editor,  a unique  feature  not 
found  with  any  competing  product.  A simple  mouse-click  switches 
you  between  document  views. 

Add  the  comprehensive  support  for  multimedia  plugin  technology 
and  DHTML  animation,  the  seamless  integration  of  Cascading  Style 
Sheets,  a wide  selection  of  color  options,  sophisticated  graphical  site 
management  capabilities,  a fully  fledged  site  designer,  and  an  edit- 
ing environment  with  maximum  ease  of  use,  and  you’ll  get  a good 
impression  of  the  power  Adobe  GoLive  offers. 
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Finally,  Adobe  GoLive  features  a state-of-the-art  site  management 
tool  that  lets  you  keep  it  all  together.  When  you  manage  your  site  in 
Adobe  GoLive’s  Site  Window,  you  will  never  lose  any  data — whether 
you  are  dealing  with  tens  or  hundreds  of  pages,  images,  media 
items,  and  other  site  components. 


Part  4 — Adobe  GoLive  Feature  Overview 


Creating  Web  Pages  Adobe  GoLive  is  HTML-based  authoring  software  to  allow  you  to  vi- 

with  Adobe  GoLive  sually  lay  out  Web  pages  with  drag  & drop  ease.  This  ease  of  use  is 

possible  primarily  because  of  its  unique  Layout  mode  and  a com- 
plete set  of  companion  authoring  tools. 

The  following  screenshot  illustrates  the  Adobe  GoLive  publishing  en- 
vironment and  explains  its  key  features. 


The  Adobe  GoLive  Screen 

The  Toolbar  always  offers  the  right  set  of  tools  for 
the  current  selection. 


The  Palette  contains  a full  selection  of  HTML 
tags — ready  for  drag  & drop  insertion. 

The  main  document  window  gives  you  seven  dif- 
ferent views  to  choose  from — each  on  a tab  of  its 
own. 


The  Inspector  lets  you  preview  files  and  set  up  tag 
attributes. 

The  Color  Palette  is  Adobe  GoLive’s  drag  & drop 
coloring  tool. 


The  Site  Window  is  a container  for  Web  pages  and 
resources. 


r 4 File  Edit  Style  Format  Special  Site  Ulindouj  Hilfe 


When  editing  Web  pages,  you’ll  use  the  following  major  compo- 
nents: 

• the  context-sensitive  Toolbar,  which  offers  the  proper  set  of  for- 
matting shortcuts  for  any  given  selection  in  the  document  win- 
dow 

• the  Palette,  which  holds  a selection  of  iconized  HTML  tags 


Adobe  GoLive  Feature  Overview 
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• the  context-sensitive  Inspector,  which  lets  you  preview  resources 
and  set  up  objects,  links,  and  HTML  tag  attributes 

• the  Color  Palette,  which  enables  you  to  drag  & drop  color  to  text 
and  objects 

• the  Site  Window,  which  lets  you  manage  your  Web  pages  and 
resources  in  major  site  building  projects 

Authoring  tools  available  in  Layout  mode  include: 

• An  HTML  table  editor  that  lets  you  flexibly  use  tables  as  a page 
design  tool  or  for  arranging  information.  The  table  editor  sup- 
ports such  features  as  column  and  row  spanning,  drag  & drop 
coloring,  drag  & drop  content  insertion,  and  data  import  from 
spreadsheet  applications. 

• A visual  JavaScript  editor  that  features  drag  & drop  scripting  and 
color  syntax  checking. 

• An  easy-to-use  interface  for  embedding  third-party  multimedia 
items  and  Java  applets,  complete  with  live  playback  capability. 

• A customizable  interface  for  new  plugins  and  Java  applets. 

• Browser-specific  options — for  example,  the  marquee  tag  that 
Microsoft  Internet  Explorer  uses. 

• Consistent  use  of  an  HTML  native  file  format. 

• Seamless  integration  of  the  latest  Web  imaging  standards, 
including  PNG  (Portable  Network  Graphics)  support. 

• Full  support  for  foreign  languages  and  script  systems. 

• A built-in  multi-language  spellchecking  tool. 

• Elaborate  find  & replace  options. 

• Thumbnail  previewing  of  HTML  pages. 

• An  easy-to-use  graphical  front  end  for  interactive  WebObjects 
elements. 
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The  Palette 


Arranged  in  nine  context-specific  tabs,  the  Palette  window  holds  a 
wealth  of  iconized  tags,  structural  page  elements,  and  generic  site 
objects.  It  also  lets  you  store  often-used  items  of  any  description  and 
degree  of  complexity  for  future  use. 


The  following  table  lists  the  Palette  tabs  and  their  respective  func- 
tions: 


Symbol 

Function 

□ 

Click  this  icon  to  select  the  Basic  Tags  tab.  Each  object  on  this  tab  represents  an  HTML 
tag  that  goes  into  the  body  section  of  the  page. 

Click  this  icon  to  select  the  Forms  Tag  tab.  Each  object  on  this  tab  represents  an  HTML 

\nn\ 

form  tag  that  goes  into  the  body  section  of  the  page. 

□ 

Click  this  icon  to  select  the  Header  Tags  tab.  Each  object  on  this  tab  represents  an  HTML 
header  tag  that  goes  into  the  header  section  of  the  page. 

E 

Click  this  icon  to  select  the  Frames  tab.  Each  object  on  this  tab  represents  an  HTML 
frame  set  tag  that  goes  into  Adobe  GoLive’s  Frames  view. 

Click  this  icon  to  select  the  Site  tab.  Each  object  on  this  tab  represents  a generic  site  ob- 
ject that  goes  into  Adobe  GoLive’s  Site  Window. 

0 

Click  this  icon  to  select  the  Extra  tab.  Each  object  on  this  tab  represents  a stationery 
page  that  goes  into  Adobe  GoLive’s  Site  Window. 

E 

Click  this  icon  to  select  the  CyberObjects  tab.  Each  object  on  this  tab  represents  a group- 
ing of  HTML  tags  and  JavaScript  code  that  goes  into  the  body  section  of  the  page. 

Click  this  icon  to  select  the  WebObjects  tab.  Each  object  on  this  tab  represents  a WebOb- 
jects-specific  HTML  tag  that  goes  into  the  body  section  of  the  page. 

✓ 

Click  this  icon  to  select  the  Custom  tab.  You  can  drag  objects  from  the  Layout  view  to 
store  them  in  this  tab  and  insert  them  back  in  any  document  when  you  need  them. 

The  number  of  tabs  in  the  Palette  may  vary,  depending  on  the  set  of 
modules  you  have  installed  or  enabled  in  Adobe  GoLive’s  prefer- 
ences. For  example,  the  default  installation  doesn’t  copy  the 
WebObjects  module  to  your  hard  disk,  so  the  WebObjects  tab  will  not 
appear  in  the  Palette. 


Inspectors 
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The  Image  Inspector 


Accompanying  each  element  dropped  in  your  page  is  a context-sen- 
sitive Inspector  window  that  saves  you  from  clicking  OK  repeatedly  in 
multi-level  dialog  boxes.  When  you  insert  a tag  or  other  element,  the 
proper  set  of  options  appears  in  the  Inspector  window,  allowing  you 
to  set  your  tag  attributes  instantly. 


Inspectors  let  you  create  hyperlinks,  reference  image  files  or  other  re- 
sources, resize  elements  with  pixel-level  precision,  align  objects  with 
respect  to  adjacent  text,  control  inter-object  spacing,  and  make 
many  tag-specific  settings. 

If  an  object  references  another  file,  as  is  the  case  with  images,  the  In- 
spector senes  as  the  point  of  departure  for  Point  & Shoot,  Adobe’s 
proprietary  hyperlink  and  file  reference  creation  tool. 

The  illustration  below  shows  the  interaction  between  thePa/effeand 
Inspector  windows:  Whenever  you  drag  an  element  from  the  Palette 
onto  the  main  document  window,  context-sensitivity  ensures  that 
the  Inspector  offers  the  appropriate  tag  attributes. 


Interaction  Between  the  Palette  and 
Inspector  Windows 


Dragging  the  Image  icon  from  the  Palette  onto  the 
document  window... 


...  opens  the  Basic  Tab  of  the  Image  Inspector  in 
the  Inspector  window. 
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The  Color  Palette 


The  Color  Palette  is  Adobe  GoLive’s  drag  & drop  coloring  tool.  You 
color  objects  by  selecting  a color  from  a rich  choice  of  different  color 
spaces  and  drop  it  at  a color  field  in  the  Inspector  window  or  selected 
text  in  the  document  window. 


The  Color  Palette  offers  seven  color  spaces  and  a grayscale,  each  on 
a separate  tab: 

• RGB 

• CMYK 

• Indexed  colors 

• Apple  system  colors 

• Real  Web  Colors  (a  palette  of  216  Web-safe  colors  that  display 
without  dithering  on  any  platform) 

• Web  Named  Colors 

Additionally,  a dedicated  tab  is  supplied  for  colors  you  collect  in  the 
Site  Window,  Adobe  GoLive’s  site  management  tool. 


Point  & Shoot 
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Point  & Shoot 


Point  & Shoot  from  text  on  one  page... 


...to  create  a link  to  another  page. 


Point  & Shoot  is  Adobe’s  proprietary  technology  that  makes  the  cre- 
ation of  links  more  convenient  and  completely  intuitive.  You  can 
start  Point  & Shoot  linking  from  various  sources  and  link  to  an  object 
in  the  Site  Window  or  to  a destination  on  another  page. 

The  example  below  shows  Point  & Shoot  linking  of  text  to  a page  in 
the  Site  Window. 


index.html 


Layout  □ [B  j 


al  ail 


□ 1 Hi 


^ [ii]  Frequent  Traveller  Homepage 


□ Eb 


an  "Index  to  Frequent  Flyer  Program  Ratings"  and  " Sid* 
by  Side  Rating  Comparisons"  that  shows  how  each 
program  measures  up  - score  by  score. 


Welcome  to  Travel  EZ 


Our  topics  this  week: 


Newsletter  Site 


Ta 


I Q Colors  ) . 


, 

i/i 

L 

Ulkl  | Newsletterf  Site  Folder  t] 

l 

Cl  ( Errors 

/ 

Name  ^”|  Status 

| URL 

k. 

L 

Name 

▼ 

fc~\/  lax.html  ✓ 

/MacOS8 /Desktop 

^ 1 / subscriptform.h...  ✓ 

/MacOS8 /Desktop 

0- 

KT  TravelersHeave...  ✓ 

/MacOS8 /Desktop 

[jj  nJWi.  ,’J  1 .V.  .'.V.JW  ✓ 

/MacOS8 /Desktop 

I>  image 

/MacOS8 /Desktop 

X 

Q llil'liMAInll  ✓ 

/MacOS8/Deskt> 

i- 

I>  Java 

/MacOS8 /Desktop 

1 1 items  | 4 | ill:  | 

IT 

0 items  | 4 | nil  | 

\* 

When  working  with  Adobe  GoLive,  you’ll  also  use  Point  & Shoot  for 
other  purposes — for  example,  to  link  Web  pages  or  to  assign  an  im- 
age, media  file,  or  other  items  to  a placeholder  inserted  from  the 
Palette. 
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Multiple  Document  For  easy  access  to  the  editing  mode  that  best  suits  your  purposes, 
Views  Adobe  GoLive  offers  a choice  of  five  different  document  views: 

• The  Layout  View  lets  you  design  a page  visually  with  pixel-level 
precision. 

• The  Frames  view  allows  you  to  structure  your  page  layout  using 
FITML  frames. 

• The  Outline  Editor  adds  structure  to  your  FITML  code. 

• The  Source  Editor  lets  you  write  and  edit  HTML  source-code. 

• The  WebObjects  editor  enables  you  to  edit  declarations  files  for 
dynamic  Web  pages  for  use  with  Apple’s  WebObjects  Server.  (This 
is  only  available  if  the  WebObjects  module  is  installed;  see  sepa- 
rate Using  WebObjects  manual  for  more  information.) 

Each  document  view  has  a dedicated  tab,  which  you  can  select  by 
clicking  at  the  desired  tab  rider.  Switching  between  views  is  fully 
transparent — what  you  see  in  the  individual  views  is  always  based 
on  the  same  code.  Also,  Adobe  GoLive  tracks  your  selection:  What  you 
select  in  one  view  remains  selected  in  the  other  when  you  switch 
views. 


Choosing  an  Editing 
Environment 


As  already  noted  in  the  “General”  section  of  this  chapter,  Adobe 
GoLive  offers  various  alternative  editing  environments  for  adding 
content  to  and  editing  Web  pages: 

• In  the  Layout  view,  you  can  insert  a layout  grid  that  lets  you 
place  text  and  other  objects — just  like  in  a frame-oriented  desk- 
top publishing  program.  As  with  a conventional  page  layout  pro- 
gram, Adobe  GoLive  gives  you  a good  sense  of  how  your  pages 
will  appear  to  your  audience.  The  Layout  View  is  also  where  you 
create  DHTML  animation  and  use  the  advanced  formatting  con- 
trols available  from  Cascading  Style  Sheets. 

The  Layout  view  allows  you  to  work  in  the  conventional  “free- 
flowing  Web  pages”  mode,  too.  You  can  type  text  and  insert  ob- 
jects from  the  Palette  (see  page  56)  one  by  one,  but  you  will  have 
to  preview  your  work  more  frequently  to  check  the  results. 

To  switch  to  the  Layout  view,  click  the  Layout  tab  in  the  docu- 
ment window. 

• The  Outline  view  permits  a closer  look  at  the  “selection”  of  your 
document,  displaying  the  structure  of  your  HTML  code. 

To  switch  to  the  Outline  view,  click  the  Outline  tab  in  the  docu- 
ment window. 


Previewing 
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The  Source  view  is  a fully  featured  HTML  text  editor  that  sup- 
ports drag  & drop  editing  and  syntax  highlighting. 

To  switch  to  the  Source  view,  click  the  Source  tab  in  the  document 
window. 

The  Frames  view  lets  you  subdivide  your  Web  page  and  display 
pages  in  frames. 

To  switch  to  the  Frames  view,  click  the  Frames  tab  in  the  docu- 
ment window. 

The  WebObjects  tab  lets  you  edit  the  WebObjects  declaration  hie. 

To  switch  to  the  WebObjects  declaration  tab,  click  the  WebObjects 
tab  in  the  document  window. 


Previewing 


□ 

B 


Adobe  GoLive  offers  Preview  modes  that  enable  you  to  preview  the 
results  of  your  work  instantly,  without  launching  a browser. 

• The  Layout  Preview  tab  lets  you  preview  pages  created  in  the 
Layout,  Source,  and  Outline  modes. 

• The  Frame  Preview  tab  lets  you  preview  pages  created  with  the 
frames  editor. 
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Layout 


The  Layout  View 


Click  at  this  tab  to  select  the  Layout  view. 


In  the  Layout  mode,  Adobe  GoLive  works  much  like  a frame-oriented 
desktop  publishing  program,  givingyou  a realistic  impression  of  how 
the  page  will  look  when  viewed  with  a Web  browser.  Resizable  layout 
grids  let  you  drag  objects  from  the  Palette  onto  your  page  and  posi- 
tion them  exactly  where  you  want  them  to  appear  to  the  Web  surfer. 
After  inserting  a grid,  you  can  add  frame-like  text  boxes,  then  drag& 
drop  or  type  to  insert  text.  You  can  also  add  images,  forms,  lists,  and 
multimedia  elements — precisely  placing  each  object  on  the  page, 
just  as  you  would  with  page  layout  software. 
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Savvy  Traveler  Top  Ten  Bonus  Programs 


Week  of  January  5, 1997 


Get  reedy  to  laugh 
es  columnist  Tony 
Johnson 
announces  his 
annual  Dubious 
Achievement 
Awards. 


It's  time  for  the 
annual  celebration 
of  the  funniest, 

stupidest,  most  bizarre  things  that 
have  happened  in  travel  in  the  past 


Get  ready  to  laugh  as  columnist  Tony  Johnson 
announces  his  annual  Dubious  Achievement 
Awards. 


Five  Best  Ways  to  Redeem 
Your  Points  or  Miles 

It's  time  for  the  annual  celebration  of  the  funniest, 
stupidest,  most  bizarre  things  that  have  happened 
in  travel  in  the  past  year.  And,  once  again,  there 
has  been  no  shortage  of  candidates. 
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Program  Reviews 


TTT 


Jody  Rothchild's  version  of  the  Letterman  Top 
Ten  list:  the  10  greatest  bonus  programs  for 
frequent  travelers.  Updated  monthly. 
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You’ll  do  most  of  your  editing  in  the  Layout  view.  You  can  drag  any 
object  from  the  Palette  onto  the  document  window,  then  “tweak”  its 
appearance  for  best  results  using  the  tag-sensitive  Inspector  window. 
Drag  & drop  support  is  also  available  for  images,  URLs,  E-mail  ad- 
dresses, colors  from  the  Site  Window,  and  colors  from  the  Color  Pal- 
ette. Additionally,  you  can  drag  & drop  between  the  Finder  and  the 
Layout  view  to  preview  images. 

For  more  details,  see  the  descriptions  of  the  Palette,  Inspector,  Point 
& Shoot,  and  Color  Palette  windows  earlier  in  this  chapter. 


Frames 
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The  Frames  View 


Click  this  tab  to  select  the  Frames  view. 


Click  this  tab  to  select  the  Frames  preview. 


The  Frames  mode  lets  you  use  HTML  frames  to  subdivide  your  page 
into  independent  panes. 

Subdividing  your  page  helps  you  organize  your  display  and  makes  it 
easier  to  work  with.  Because  each  pane  displays  a separate  page,  you 
can  change  and  scroll  it  independently. 

Adobe  GoLive’s  Frames  mode  is  fully  drag  & drop-based:  You  can  use 
drag  & drop  to  insert  a page  into  each  frame,  as  well  as  resize  frames 
and  rearrange  frame  sets. 


A preview  tab  in  the  main  document  window  eliminates  the  need  to 
launch  a Web  browser  for  previewing  HTML  frames.  Also,  you  can 
preview  frame  sets  selectively  by  disabling  individual  frames. 
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The  Outline  View 


Click  this  tab  to  select  the  Outline  view. 


Adobe  GoLive  Basics 


The  Outline  mode  lets  you  view  your  document  in  a structured  ap- 
proach to  building,  fine-tuning,  and  debugging  HTML  code. 

The  Outline  view  shows  the  hierarchy  of  HTML  tags  in  your  docu- 
ment, using  a box  metaphor  to  display  individual  tags. 

ftlSEa  SMB  ES 


In  the  Outline  view,  you  can  collapse  and  expand  individual  tags  or 
entire  parts  of  the  document  hierarchy  with  a mouse-click. 

Editing  is  also  possible  in  the  Outline  mode:  You  can  insert  tags  and 
attributes,  text  and  comments  using  either  the  shortcut  buttons  on 
the  context-sensitive  toolbar  or  menu  commands. 


Source 
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The  Source  View 

Click  this  tab  to  select  the  Source  view. 


The  Source  mode  lets  you  view  the  HTML  code  behind  your  docu- 
ment, much  the  same  way  text-oriented  Web  editors  do.  This  docu- 
ment view  is  particularly  useful  for  experienced  HTML  programmers 
who  want  to  fine-tune  their  work  and  check  their  HTML  code  before 
publication. 

To  ensure  that  your  code  is  absolutely  error-free,  however,  the  Source 
mode  uses  syntax  highlighting.  In  syntax  highlighting,  separate  col- 
ors visually  separate  tags,  attributes,  and  document  content,  making 
it  easy  for  users  to  keep  track  of  their  HTML  code. 


For  maximum  ease  of  use,  all  syntax  highlighting  and  checking  com- 
mands are  available  as  shortcut  buttons  above  the  main  window 
area. 

Consistent  with  Adobe  GoLive’s  overall  design,  the  Source  view  pro- 
vides full  drag  & drop  support  for  all  Basic  Tags  from  the  Palette. 
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Creating  Animations  Adobe  GoLive  provides  comprehensive  support  for  DHTML  (Dynamic 

HTML) — a new  technology  for  the  4.x  generation  of  Web  browsers. 
Dynamic  HTML  lets  Web  authors  create  animated  pages  without  typ- 
ing a single  line  of  code  or  using  third-party  animation  software  that 
produces  bulky,  slow-loading  files.  DHTML  has  two  major  compo- 
nents: 

• floating  boxes 

• Netscape’s  JavaScript  and  Microsoft’s  JScript  scripting  languages 


Adobe  GoLive  features  a complete  set  of  DHTML  tools  that  let  you  in- 
sert floating  boxes  with  drag  & drop  ease,  then  set  them  up  in  dedi- 
cated editor  windows.  An  example  of  Adobe  GoLive’s  DHTML  editing 
environment  appears  below. 


Creating  DHTML  Animations  in  Adobe 
GoLive 

Dragging  the  Floating  Box  icon  from  the  Palette 
into  the  document  window  inserts  a floating  box. 


This  floating  box  containsan  animated  GIF  image. 
It  moves  along  a curved  path  from  the  upper  left 
to  the  upper  right  corner  of  the  page. 


The  Timeline  Editor  lets  you  control  the  motion  of 
the  floating  box  over  time. 

The  Floating  Box  Inspector  controls  the  initial  po- 
sition, layering,  and  visibility,  of  the  floating  box, 
as  well  as  the  curve  shape  of  the  animation. 


fc)4  f lift  tdU  Hijl»  ttf  UHndou*  Help 


Adobe  GoLive’s  DHTML  Animation  Tools 

Adobe  GoLive’s  DHTML  animation  editing  environment  consists  of 

three  major  components: 

• The  Floating  Box  icon  in  the  Basic  Tags  tab  of  the  Palette  lets  you 
insert  a floating  box  via  drag  & drop  or  double-clicking. 

• The  Floating  Box  Inspector  allows  you  to  set  both  static  and 
dynamic  properties  of  the  floating  box,  including  initial  posi- 
tion, width  and  height,  and  background  color  or  image  dis- 
played in  the  floating  box,  visibility,  dynamic  layering  of 
multiple  floating  boxes,  and  shape  of  the  animation  path. 


Creating  Animations 
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• The  Timeline  Editor  lets  you  determine  the  behavior  of  floating 
boxes  within  the  page.  Keyframes  mark  specific  times  at  which 
the  animated  item  is  supposed  to  change  its  path  or  appear- 
ance. Keyframes  can  also  be  connected  with  JavaScript-based 
actions.  Actions  can  jump  to  another  page  or  perform  other 
browser-specific  actions. 

The  Floating  Box  Inspector  isthecompanioninspectorwindowtothe 
Timeline  Editor.  It  lets  you  control  the  position  and  appearance  of 
each  animated  item,  temporarily  hide  selected  items  to  simulate  rel- 
ative motion,  and  control  their  stacking  order. 

You  can  connect  many  Adobe  GoLive  objects  with  actions,  which  are 
ready-to-use  JavaScript  scripts  compatible  with  all  major  browsers. 
You  can  use  them  to  animate  objects,  flip  or  move  items  across  the 
page,  open  specified  URLs  or  windows,  swap  the  content  of  an  im- 
age, play  an  audio  track,  show  or  hide  an  object,  and  perform  many 
more  activities. 

Additional  DHTML  objects  reside  in  the  CyberObjects  tab  of  the  Pal- 
ette. 


The  CyberObjects  Tab  of  the  Palette 


They  let  you  do  the  following: 

• add  a date  & time  stamp 

• create  animated  navigation  buttons 

• insert  components  to  reference  visual  design  elements  that 
occur  on  multiple  pages 

• include  a popup  menu  listing  selected  destinations  on  the  Web 

• insert  actions  into  the  header  section  of  the  page  to  trigger  the 
execution  of  a script  before  the  browser  loads  the  body  section 
of  the  page 

• insert  a script  into  the  header  section  of  the  page  that  reads  the 
application  name  and  version  number  of  the  browser  and 
jumps  to  a browser-specific  version  of  the  current  page 
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Cascadi ng  Style  Sheets  Adobe  GoLive  contains  all  the  tools  necessary  to  let  Web  designers 

use  Cascading  Style  Sheets  (CSS)  for  building  pages  that  really  stand 
out — with  minimum  effort.  Cascading  Style  Sheets  not  only  give  the 
user  tighter  control  over  the  on-screen  presentation  of  documents 
but  they  also  introduce  platform-independent  typography.  As  more 
and  more  Web  surfers  migrate  to  the  4.x  generation  of  browsers,  Web 
authors  will  soon  be  able  to  abandon  using  GIFs  to  render  type.  The 
screenshot  below  shows  Adobe  GoLive’s  CSS  editing  tools. 


Creating  Text  Styles  with  Cascading  Style 
Sheets 

Shortcut  buttons  on  the  Stylesheet  Toolbar  let  you 
add  styles  to  the  Stylesheet  Window. 

This  oversized  headline  was  created  usingaCSSID 
selector. 

A negative  leadingallows this subheaderto  “grow” 
into  the  headline. 

This  is  a normal  HI  header — formatted  with  CSS. 


These  are  normal  H2  headers — also  formatted 
with  CSS. 


The  CSS  Selector  Inspector  lists  Adobe  GoLive’s  in- 
ventory of  style  properties. 

The  Stylesheet  Window  shows  all  styles  you  have 
created  within  your  document. 


r File  Edit  Style  Format  Special  Site  UJindoui  Hilfe 


Adobe  GoLive  lets  you  create  a style  sheet  either  within  the  current 
page  or — to  make  it  available  site-wide — as  an  external  document. 
You  can  then  add  styles  by  clicking  buttons  on  the  Stylesheet  Toolbar 
and  edit  their  properties  in  the  CSS  Selector  Inspector.  Style  variants 
that  CSS  supports  include: 

• Tag  selectors:  This  type  of  style  reformats  standard  HTML  tags. 
Once  created,  it  is  applied  automatically. 

• Classes:  Much  like  text  styles  in  a word  processor,  this  type  of 
style  can  be  applied  universally  to  elements  you  select  in  your 
page.  Classes  have  a dedicated  tab  in  the  Text  Inspector,  which 
works  like  a style  palette. 

• IDs:  This  type  of  style  identifies  a unique  element  in  your  page. 

• Referenced  style  sheet:  You  can  reference  an  external  style  sheet 
from  within  any  page  in  your  site.  Whenever  you  make  changes 
to  the  style  sheet,  your  pages  are  automatically  reformatted 
throughout  your  site. 


Cascading  Style  Sheets 
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The  Site  Window  Adobe  GoLive’s  state-of-the-art  site  manager  module  lets  you  keep  it 

all  together.  The  Site  Window  makes  site  management  a snap — 
whether  you  are  dealing  with  tensor  hundreds  of  pages,  images,  me- 
dia items,  and  other  site  components.  Transparent  integration  with 
the  Macintosh  Finder  makes  site  management  very  intuitive:  The 
Site  Window  shows  an  exact  replica  of  the  folder  structure  on  your 
hard  disk,  so  when  you  move  an  item  around  in  the  Site  Window,  the 
same  happens  to  the  physical  file  in  the  Finder. 

Adobe  GoLive  lets  you  design,  create,  import,  edit,  and  view  an  entire 
site  as  a complete  project.  With  Adobe  GoLive,  you  can  graphically 
see  a site’s  structure,  adjust  its  hierarchy,  add  pages,  delete  pages, 
and  open  individual  pages,  as  well  as  verify,  change,  and  update 
links  and  anchors. 

State-of-the-art  technology — Point  & Shoot  linking,  FTP-based  edit- 
ing access  to  Web  servers  with  bidirectional  update  capability, 
graphic  displays  of  physical  document  hierarchies,  and  import  capa- 
bility for  homepages — plus  referenced  files,  automatic  URL  refer- 
ence parsing,  and  continuous  link  integrity  validation  save  time, 
increase  productivity,  and  ensure  Web  compatibility. 


The  Site  Window 


The  left  pane  of  the  Site  Window  shows  the  items 
that  make  up  your  site,  replicating  the  physical 
file  and  folder  structure  on  your  hard  disk. 


The  right  pane  of  the  Site  Window  shows  missing 
items  in  the  Errors  tab. 


IbeSite  Window  is  the  key  to  site  management.  It  lets  you  collect  and 
manage  your  resources  using  iconized  lists  of  Web  pages,  text  docu- 
ments, media  files,  images,  Uniform  Resource  Locators,  mail  ad- 
dresses, colors,  and  font  sets. 
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The  Site  Window  is  subdivided  in  five  horizontal  tabs: 

• The  Files  tab  is  in  turn  divided  into  two  panes.  The  left  pane 
shows  the  HTML  pages,  media  files,  and  images  used  in  your 
site.  The  right  pane  has  three  vertical  tabs: 

- Along  with  other  errors  indicators,  the  Errors  tab  alerts  you  to 
missing  file  and  orphan  file  problems. 

- The  FTP  tab  lets  you  view  your  site  on  the  Web  server,  open 
files  remotely  for  editing,  and  make  incremental  updates  in 
either  direction. 

- With  the  Extra  tab,  you  can  create  and  store  stationery  you 
want  to  use  when  designing  your  site. 

• The  Site  tab  contains  Adobe  GoLive’s  graphical  site  viewing  and 
design  tools  (see  later  in  this  section). 

• The  External  tab  can  store  URLs  and  E-mail  addresses  you  want 
to  insert  into  pages. 

• The  Colors  tab  can  store  site  colors  for  later  use.  Site  colors  are 
available  for  drag  & drop  coloring  while  you  are  designing 
pages. 

• The  Fontsets  tab  can  store  fontsets  for  later  use.  Fontsets  are  also 
available  for  drag  & drop  insertion. 


Site  Management 
Tools 


The  Site  Toolbar 

Creates  a new  folder  in  the  Finder. 
Opens  the  selected  file  or  folder. 
Deletes  the  current  selection. 
Equivalent  to  Get  Info  in  Finder. 
Shows  file  in  Finder. 

Opens  a Find  Files  dialog  box. 


Accompanying  the  Site  Window  are  companion  windows  with  site 
management  tools,  including  a context-sensitive  toolbar,  two  tabs  in 
the  Palette,  and  specific  Inspectors  lor  the  items  listed  in  the5/Ye  Win- 
dow. The  example  below  shows  the  Site  Toolbar  and  explains  its  mul- 
tiple shortcut  buttons. 


D|[]p  i [go  jLPjr^i  iTiijLgBg 


Bidirectional  update  via  FTP. 

■ Connects  to  Web  server  via  FTP. 
Opens  Settings  panel. 

Changes  links  across  the  board. 
Opens  the  Link  Inspector. 

- Updates  the  Site  Window. 


The  Site  View 
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The  Site  View  tab  in  the  Site  Window  gives  you  an  overview  of  the  hi- 
erarchy within  your  site,  using  user-selectable  document  icons  and  a 
spiderweb  of  interconnecting  lines  to  display  the  hyperlinks. 

Beyond  its  viewing  functionality,  however,  the  Site  View  is  also  a fully 
fledged  site  design  tool,  allowing  you  to  lay  out  the  architecture  of 
your  site  before  you  start  adding  content. 


Interconnecting  lines  represent  forward  links. 


Referenced  pages  are  children  of  the  parent  page 
and  siblings  to  each  other. 

Horizontal  lines  represent  backward  links  be- 
tween siblings  or  between  a child  and  a parent. 


The  Site  View 


The  Site  View 


The  home  page  is  the  parent  page. 


An  associated  Site  View  Controller  window  lets  you  customize  the  Site 
View  in  many  ways  to  suit  your  personal  viewing  preferences. 

Invoked  via  a button  on  the  toolbar  or  a menu  command,  the  Link 
Inspector  functions  much  like  a magnifying  glass,  permitting  you  to 
zoom  in  on  selected  items  in  your  site.  The  resulting  spiderweb  view 
lets  you  walkthrough  your  site  and  inspect  individual  pages  and  the 
links  they  maintain  with  other  pages  and  resources. 
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The  Link  Inspector 


Small  icons  indicate  pages  or  resources  refer- 
enced by  the  current  page. 


The  threads  of  the  spiderweb  represent  links  or 
references  to  resource  files. 

The  large  symbol  (a  generic  symbol,  thumbnail, 
or  standard  file  icon)  indicates  the  current  page 
you  have  zoomed  in  on. 


Point  & Shoot  buttons  let  you  edit  multiple  hy- 
perlinks or  file  references  at  a time. 


The  Link  Inspector  is  also  a convenient  hyperlink  editing  tool.  For  ex- 
ample, using  Point  & Shoot  from  within  th e Link  Inspector,  you  can 
replace  a reference  to  an  image  in  all  pages  throughout  your  site. 


Macintosh 
Technology  Support 


Adobe  GoLive  is  designed  specifically  for  Macintosh  users.  It  allows 
you  to  drag  & drop  files  directly  from  the  Finder  onto  your  page.  It 
works  smoothly  with  your  other  Macintosh  applications.  And  Adobe 
GoLive  supports  all  the  latest  Apple  technologies,  including  Apple 
Guide,  QuickTime  3.0  , QuickTimeVR™,  ColorSync  2.5,  and  others. 
Adobe  GoLive  provides  for  full  compatibility  with  MacOS  8.5  technol- 
ogies, such  as  th e Appearance  Manager  ar\d  Navigation  Services.  A 
brief  description  of  the  new  features  incorporated  in  release  4.0  can 
be  found  in  Part  5 — New  Features  in  Adobe  GoLive  4,  on  page  74 
later  in  this  chapter. 


WebObjects  Support 

Adobe  GoLive  provides  a convenient,  easy-to-use  front  end  for  We- 
bObjects, the  powerful  high-end  development  environment  for  dy- 
namic interactive  Web  applications  from  Apple  Computer  (formerly 
from  NeXT  Software,  Inc.). 

Adobe  GoLive’s  WebObjects  support  makes  it  easy  for  designers  and 
programmers  to  work  together  and  build  dynamicWeb  pages.  While 
designers  create  the  visual  presentation,  programmers  can  use  the 
WebObjects  development  environment  (not  included  in  Adobe 
GoLive)  to  develop  the  logic. 


Macintosh  Technology  Support 
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The  WebObjects  Tab  of  the  Pal- 
ette 


• Default 


Forms 
Frames 
Head  Items 
Extensions 


The  WebObjects  tab  of  the  Palette  offers  a complete  set  of  WebObjects 
elements,  all  ready  for  drag  & drop  insertion.  Each  WebObjects  tag 
has  its  own  Inspector  window  with  a specific  set  of  configuration  op- 
tions. 

When  the  user  chooses  configuration  options,  the  result  is  written  to 
a declaration  file  that  links  the  WebObjects  tags  on  your  HTML  page 
with  the  corresponding  WebObjects  components  on  the  Web  server 
and  specifies  the  actions  to  be  taken.  This  declaration  file  appears  in 
a dedicated  tab  in  the  document  window. 

For  instructions  on  using  WebObjects,  see  the  separate  Using  WebOb- 
jects manual  shipped  with  the  Adobe  GoLive  package. 

World  Script  and  Text  Encoding  Converter  Support 

Adobe  GoLive  uses  World  Script  and  Text  Encoding  Converter,  Apple’s 
proprietary  system  extension  for  multi-language  documents,  so  you 
can  build  Web  pages  that  Web  surfers  worldwide  can  read. 
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AppleScript  Support 

Adobe  GoLive’s  HTML  source  mode  provides  comprehensive  support 
for  AppleScript,  Apple’s  proprietary  tool  for  automating  repetitive 
tasks  on  Macintosh  computers.  Scripting  Adobe  GoLive  allows  you, 
for  example,  to  build  pages  automatically. 


Part  5 — New  Features  in  Adobe  GoLive  4 

This  section,  directed  to  users  of  the  3.x  versions  of  Adobe  GoLive, 
contains  a rundown  of  new  features  introduced  with  Release  4. 
Where  required,  cross-references  are  made  to  individual  chapters 
that  provide  in-depth  coverage  of  the  features  listed  here. 


User  Interface 
Enhancements 


The  Preferences  - General  - Display 
Dialog  Box 

Use  this  option  to  enable  or  disable  Appearance 
Manager  support,  as  desired. 

Use  this  option  to  enable  or  disable  Navigation 
services,  as  desired. 


Adobe  GoLive’s  support  for  the  Mac  OS  8.5  Appearance  Manager  has 
been  further  enhanced.  When  you  enable  the  Smart  Scrolling  option 
on  theOpf/'onstab  of  the  Mac  OS  Appearance  control  panel,  the  scroll 
box  in  the  scroll  bar  is  continuously  resized  according  to  the  visible 
content  of  the  window.  This  feature  is  available  for  all  windows  in 
Adobe  GoLive  4.0,  including  document  windows,  the  Site  Window, 
the  Inspector,  the  Palette,  the  Floating  Box  Controller,  and  the  Color 
Palette. 

Two  new  options  have  been  added  to  the  Preferences  - General  - Dis- 
play dialog  box  (see  below)  to  let  you  control  Appearance  Manager 
support. 


New  Features  in  Adobe  GoLive  4 
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Multiple  Cell 
Selection  and 
Text  Formatting 


Improved  Web 
Technology  Support 


New  Site 

Management 

Capabilities 

Link  Maintenance  for 
QuickTime™  Movies  and 
Shockwave  or  Flash  Files 


The  Appearance  Theme  Savvy  checkbox  lets  you  enable  or  disable 
Mac  OS  8.5  Appearance  support  for  Adobe  GoLive. 

The  Use  Navigation  Services  checkbox  lets  users  who  prefer  working 
with  standard  Open  and  Save  dialog  boxes  disable  Mac  OS  8.5  Navi- 
gation services  for  Adobe  GoLive. 


Adobe  GoLive  4.0  lets  you  select  multiple  cells  in  a table  and  apply 
colors,  font  sets,  and  relative  font  sizes,  even  to  single  cells  within  the 
selection.  Unlike  table  editors  in  word  processors,  however,  the  cells 
you  select  do  not  have  to  form  a contiguous  block.  A detailed  de- 
scription of  the  new  cell  selection  and  formatting  options  appears 
Making  Selections  Within  a Table  on  page  139  in  Chapter  4,  Building 
Web  Pages. 


Adobe  GoLive  4.0  provides  basic  viewing  and  editing  support  for  var- 
ious emerging  Web  technologies,  including  Extensible  Markup  Lan- 
guage (XML)  and  Microsoft’s  Active  Server  pages. 

It  preserves  hidden  non-HTML  code  found  in  the  page,  including 
special  locations  such  as  the  space  before  the  first  opening  <HTML> 
tag  or  between  table  cells.  These  new  capabilities  are  the  subject  of 
a dedicated  chapter,  Web  Technology  Support,  starting  on  page  755. 


This  section  familiarizes  you  with  the  new  site  management  features 
in  Adobe  GoLive  4.0  and  uses  cross-references  to  guide  you  to  the 
pages  in  this  manual  where  more  detailed  information  appears. 


Adobe  GoLive’s  link  parser  has  unlimited  access  to  the  URLs  on  the 
HREF  tracks  of  QuickTime™  movies  and  Macromedia  Shockwave  or 
Flash  files,  allowing  it  to  monitor  both  file  formats  for  broken  links 
and  rewrite  internal  URLs  when  the  user  changes  a link  or  file  refer- 
ence. 
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Subfolder  Rescan 
Capability 


Contextual  Menu  Support 
for  Troubleshooting 
Missing  File  Problems 


Absolute  Paths  in  URLs 


URL  Mappings 


New  CyberObjects 
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Unlike  previous  3.x  versions,  which  scanned  the  entire  site  folder 
when  the  user  clicked  the  Update  button  HZ)  on  the  Site  Toolbar  or 
chose  the  Update  command  from  the  Site  menu,  the  new  4.0  release 
has  the  ability  to  scan  subfolders  of  the  site  folder.  In  terms  of  usabil- 
ity, this  means  that  when  you  use  the  Update  command  while  you 
are  browsing  a subfolder,  the  program  won’t  return  the  Site  Window 
to  the  root  level  anymore  after  completing  the  rescan. 


Adobe  GoLive  4.0  features  a new  Find  shortcut  on  the  contextual 
menu  that  appears  when  you  Control-click  a missing  file  item  in  the 
Error  tab  in  the  right  pane  of  the  Site  Window.  This  feature  is  de- 
scribed in  the  section  Using  the  Contextual  Menu  for  Troubleshooting 
Missing  File  Problems  on  page  689  i n Chapter  1 7,  Managing  Web  Sites 
with  Adobe  GoLive. 


Adobe  GoLive  4.0  lets  the  author  decide  whether  the  path  specifica- 
tions within  URLs  that  reference  other  items  in  subfolders  of  the  site 
folder  should  be  relative  or  absolute.  This  feature  has  been  intro- 
duced to  accommodate  applications  in  which  path  specifications 
must  be  relative  to  the  root  folder  of  the  site.  It  also  enables  Adobe 
GoLive  to  import  sites  that  use  absolute  URLs  without  producing 
multiple  error  messages.  For  more  details,  please  refer  to  the  section 
Setting  Up  Adobe  GoLive  to  Use  Absolute  Paths  on  page  71 9 i n 
Chapter  17,  Managing  Web  Sites  with  Adobe  GoLive. 


The  new  URL  Mappings  feature  lets  experienced  Web  authors  work 
with  Web  sites  that  are  distributed  over  several  folders.  This  feature 
provides  the  flexibility  to  handle  complex  sites  that  reside  in  sepa- 
rate directories  on  the  Web  server  or  on  different  Web  servers.  In- 
depth  coverage  of  this  feature  is  given  in  the  section  URL  Mappings 
on  page  71 5 in  Chapter  1 7,  Managing  Web  Sites  with  Adobe  GoLive. 


Adobe  GoLive  4.0  comes  with  many  enhancements  to  the  Cyberob- 
jects DHTML  authoring  environment. 

Following  is  a brief  list  of  the  new  features: 

• You  can  now  embed  and  display  scripted  actions,  floating  boxes, 
scenes,  button  images,  and  URL  popups  in  dynamic  compo- 
nents. The  new  release  also  lets  you  nest  dynamic  components. 


New  CyberObjects 
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• Adobe  GoLive  4.0  gives  you  the  option  of  creating  an  external 
JavaScript  library  file  that  stores  common  code  from  JavaScript 
actions,  scenes,  and  image  buttons.  This  library  is  uploaded 
together  with  the  pages  to  make  the  code  accessible.  For  more 
details,  please  refer  to  the  section  Shifting  Code  to  an  External 
Library,  starting  page  316  in  Chapter  5,  Dynamic  HTML. 

• New  triggers  give  Web  authors  more  options  for  launching 
scripted  actions.  Actions  can  now  be  started  when  the  browser 
loads  or  leaves  the  page,  by  calling  a named  action  from  the 
head  section,  or  when  the  browser  hits  an  inline  action  trigger, 
in  the  body  of  the  page.  For  more  details,  please  refer  to  the  sec- 
tion Action  Triggers  on  page  273  in  Chapter  5,  Dynamic  HTML. 

• The  following  actions  have  been  added: 

- Get  Floating  Box  Position  monitors  the  current  location  of  a 
floating  box  on  the  screen. 

- Get  Form  Value  reads  text  the  visitor  enters  in  a text  field. 

- Document  Write  interworks  with  the  new  Inline  Action  Item 
from  the  Palette  (see  page  248)  to  let  you  dynamically  insert 
HTML  code  in  the  body  section  of  the  page. 

- Move  by  moves  a floating  box  horizontally  and/or  vertically. 

- Call  Action  calls  an  action  from  the  head  section  of  the  page. 

- Call  Function  calls  a function  from  the  head  section  of  the 
page  or  an  external  JavaScript  library. 

- KeyCompare  launches  an  action  when  the  visitor  hits  a select- 
ed key. 

- Declare  Variable  lets  you  declare  a variable  of  a well-defined 
data  type. 

- Init  Variable  lets  you  assign  an  initial  value  to  each  variable. 

- Read  Cookie  reads  the  content  of  a cookie. 

- Set  Variable  lets  you  dynamically  assign  a value  to  a variable. 
Test  Variable  reads  the  current  value  of  a variable. 

Write  Cookie  saves  the  value  of  a variable  in  a cookie  on  the 
visitor’s  hard  disk. 

The  new  actions  appear  in  the  section  Using  Actions,  starting  on 
page  269  in  Chapter  5,  Dynamic  HTML. 
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QuickTime  Authoring  Adobe  Systems  has  licensed  QuickTime™  from  Apple  Computer,  Inc. 

for  use  in  Adobe  GoLive  4.0.  The  new  release  comes  with  a robust 
QuickTime™  editor  loaded  with  a wealth  of  authoring  features,  in- 
cluding the  ability  to  create  new  movies  and  add  effects  and  transi- 
tions. Also  featured  are  sprite  animations,  audio  and  MIDI,  hypertext 
references,  chapter-based  navigation,  and  subtitling.  It  enables  mul- 
timedia authors  to  create  movies  for  the  Web  and  edit  them  using 
many  of  the  new  features  included  in  Apple’s  QuickTime™  3.0  au- 
thoring suite. 

This  new  authoring  environment  is  described  in  Chapter  7. 


Part  6 — Common  Controls  in  Adobe  GoLive 

Part  6 introduces  common  controls  used  in  many  windows  and  pal- 
ettes throughout  the  application. 


List  Window  Controls  List  windows  in  Adobe  GoLive,  such  as  the  Site  Window  or  the  Web 

Data  base  window,  share  a set  of  controls  that  let  you  manipulate  the 
order  of  columns  and  rows  in  lists. 


List  Sort  Controls 


You  can  sort  the  items  listed  in  the  active  column  in  ascending  or  de- 
scending order.  To  change  the  sort  order  for  the  active  column,  pro- 
ceed as  follows: 

1 Click  the  small  triangle  control  in  the  column  header. 

2 This  control  sorts  lists  as  follows: 


Name 


Name 


Descending  order 


Ascending  order 


Column  Resize  Controls 


You  can  resize  the  columns  of  any  tab  in  a list  window  to  display 
more  of  their  content.  To  resize  a column,  proceed  as  follows: 

1 Click  the  right  border  of  the  column  header.  The  resize  cursor  ^ 
appears. 

2 Drag  to  the  right  to  increase  column  width  or  to  the  left  to  de- 
crease. 
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Column  Swap  Controls 


To  rearrange  the  content  of  each  tab  in  a list  window,  you  can  swap 
columns  via  drag  & drop.  An  example  of  swapping  columns  in  the 
Files  tab  of  the  Site  Window  appears  below. 


Swapping  Columns 


Command-dick  the  column  header  to  activate  it 
for  dragging. 


Drag  to  the  new  location  to  rearrange  the  order  of 
the  columns. 
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/Macintosh  HD /Desktop  Folder /NewsletterFolder/FTHomepage  .html 
/MacintostiHD  /Desktop  Folder /NewsletterFolder /html/ 
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To  swap  columns,  proceed  as  follows: 

1 Command-click  the  head  of  the  Status  or  URL  column  (you  can- 
not shift  the  Name  column). 

2 Drag  the  column  sideways  in  the  desired  direction  and  drop  it  at 
the  desired  location. 


General  Window 
Controls 


Collapsing  and  Expanding  Tab  Riders 

To  increase  the  visible  display  area,  Adobe  GoLive  lets  you  collapse 
the  tab  in  any  of  its  windows. 

The  following  example  illustrates  how  to  collapse  and  expand  tab 
riders. 


Collapsing  and  Expanding  Tab  Riders 

Double-dick  any  tab  rider  to  collapse  all  tabs 
within  the  active  window. . . 
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. . . then  click  the  narrow  ledge  below  the  title  bar 
to  expand  all  tabs  again. 


80 


Adobe  GoLive  Basics 


CHAPTER  3 


Pop-up  Windows 

To  reduce  desktop  clutter,  Adobe  GoLive  lets  you  use  Apple’s  pop-up 
windows  technology.  You  can  collapse  any  document  window  and 
the  Site  Window  by  clicking  its  title  bar  and  dragging  it  to  the  bottom 
of  the  screen,  which  reduces  the  window  to  a named  tab.  Similar  to 
the  MacOs  8 Finder,  you  can  open  pop-up  windows  by  clicking  their 
title  tab.  The  following  screenshot  shows  pop-up  views  of  a docu- 
ment window  and  the  Site  Window. 


Adobe  GoLive  Windows  Reduced  to 





Pop-up  Windows 

I In 

page1.html 

^Newsletter  Site 

Adobe  GoLive’s  pop-up  windows  are  easily  identified  by  the  shape  of 
their  corners:  Pop-up  windows  from  the  Finder  have  rounded  edges, 
while  Adobe  GoLive’s  pop-up  windows  don’t. 

Collapsible  Palette,  Inspector,  and  Color  Palette  Windows 

You  can  collapse  the  Palette,  Inspector  and  Color  Palette  windows  by 
dragging  them  to  the  right  edge  of  the  screen.  Double-clicking  ex- 
pands them  to  their  previous  size. 

Contextual  Menus  Contextual  menus  are  available  for  many  items  in  Adobe  GoLive’s 

windows,  including  the  document  window  and  the  Site  Window  (see 
The  Site  Window  starting  on  page  609  in  Chapter  17,  Managing  Web 
Sites  with  Adobe  GoLive).  The  following  screenshot  shows  a contextu- 
al menu  on  top  of  the  Site  Window. 

A Contextual  Menu  on  Top  of  the  Site 
Window 


A contextual  menu  pops  up  when  you  Control-click  an  item  in  any  of 
Adobe  GoLive’s  windows. 


Common  Controls  in  Adobe  GoLive 
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Controls  in  the 
Document  Window 


Inspector  Features 
and  Controls 


In  Layout  mode,  Adobe  GoLive’s  document  window  has  four  built-in 
buttons: 


<s> 

Clicking  this  button  opens  the  JavaScript  editor.  Fora  description  and  instructions,  please 
refer  to  the  section  JavaScript  on  page  185  in  Chapter  4,  Building  Web  Pages. 

□ 

Clicking  this  button  opens  the  Timeline  Editor.  For  a description  and  instructions,  see  the 
section  The  Timeline  Editor  on  page  232  in  Chapter  5,  Dynamic  HTML. 

El 

Clicking  this  button  opens  the  Stylesheet  Window.  Fora  description  and  instructions,  please 
refer  to  the  section  The  Stylesheet  Window  on  page  337  in  Chapter  6,  Cascading  Style  Sheets. 

While  in  Layout  mode,  clicking  the  “eye”  button  above  the  right  scroll  bar  opens  the  Layout 
View  Controller  {see  page  90  in  Chapter4,  Building  WebPages).  Clickingthis  button  in  the  Site 
tab  of  the  Site  Window  opens  the  Link  Inspector  (see  page  673  in  Chapter  1 1,  Managing  Web 
Sites  with  Adobe  GoLive). 

Although  the  appearance  of  the  Inspector  window  varies  with  the 
current  selection,  the  controls  you  use  to  set  tag  attributes  remain 
the  same. 

The  following  table  lists  the  Inspector’s  controls  and  their  respective 
functions: 


Control 


Function 


You  can  use  text  boxes  to  enter  numerals,  measurements  (in  pixels  or  percent), 
URLs,  etc. 

Proceed  as  follows: 

1 Click  at  the  text  box  to  place  the  cursor. 

2 Make  the  desired  entry.  As  soon  as  you  enter  text,  a Carriage  Return  symbol 
appears  to  the  right  of  the  text  box,  prompting  you  to  confirm. 

3 Press  the  Return  key. 


Color  fields  let  you  color  the  currently  element.  They  are  frequently  accompa- 
nied by  a checkbox. 

Proceed  as  follows: 

1 Click  the  checkbox  to  enable  the  color  attribute. 

2 Go  to  the  Color  Palette  and  choose  a color.  Your  selection  should  appear  in 
the  color  preview  pane  of  the  Color  Palette. 

3 Drag  the  color  from  the  preview  pane  of  the  Color  Palette  at  the  color  field  in 
the  Inspector.  The  color  of  the  selection  should  change  now. 


0 Color 

Checkboxes  toggle  an  option — object  color,  for  example — on  and  off. 
Proceed  as  follows: 

1 Click  the  checkbox. 

2 The  check  mark  indicates  that  the  option  is  selected. 

Radio  buttons  let  you  select  one  item  out  of  a group  of  options. 
Proceed  as  follows: 

o 

1 Click  the  desired  radio  button. 

2 A black  bullet  indicates  that  the  option  is  selected. 

Popup  menus  let  you  make  a selection  from  a set  of  options,  such  as  measure- 
ment units,  object  alignment,  and  others. 

Proceed  as  follows: 

1 Click  to  pop  up  the  menu. 

2 Drag  to  the  menu  item  of  your  choice. 

3 Release  the  mouse  button  to  make  your  selection. 
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Function 

H) 

The  Point  & Shoot  button  appears  in  any  Inspector  window  that  lets  you  make  a 

hyperlink  to  another  page  or  embed  an  image  or  media  item. 

Proceed  as  follows: 

1 Click  the  Point  & Shoot  button. 

2 Drag  to  an  item  in  the  Site  Window.  An  interconnecting  line  appears. 

3 Release  the  mouse  button  when  the  desired  object  highlights. 

4 The  interconnecting  line  blinks  twice  to  indicate  that  Po//7f  & Shoot  has  been 
successful.  (If  it  recoils  back  to  the  Point  & Shoot  button,  you  have  released 
the  mouse  button  before  the  object  was  highlighted.) 

5 The  item  you  have  linked  to  appears  in  the  URL  text  box  of  the  Inspector.  Text 
links  are  clickable  now  and  images  are  displayed  instead  of  placeholders. 
Examples  for  using  Point  & Shoot  appear  at  throughout  this  manual. 

Chapter  4 Building  Web  Pages 

This  chapter  provides  step-by-step  instructions  for  build- 
ing Web  pages  in  Layout  view,  revealing  the  capabilities 
of  Adobe  GoLive’s  page  building  environment. 


General  Adobe  GoLive’s  Layout  mode  provides  a comprehensive  set  of  fea- 

tures for  building  Web  pages.  It  includes  all  the  tools  you  need  to  cre- 
ate pages  and  add  content,  including  text,  images,  color,  and 
animation. 

The  following  screenshot  illustrates  the  Adobe  GoLive  page  building 
environment  ( Layout  view  shown)  and  explains  the  major  features. 


The  Page  Building  Environment 

The  Toolbar  helps  you  format  text,  arrange 
items  on  a layout  grid,  and  launch  browser(s). 

These  tabs  in  the  document  window  let  you 
switch  document  views. 


The  Palette  contains  a complete  inventory  of 
Web  page  building  blocks,  all  ready  for  drag  & 
drop  insertion. 


The  Inspector  helps  you  edit  tags  and  at- 
tributes, and  it  is  the  origin  for  Point  & Shoot 
linking. 

The  document  window  lets  you  drop  objects 
on  to  a layout  grid,  allowing  you  to  place 
them  exactly  as  you  would  with  page  layout 
software. 


The  Site  Window  lets  you  manage  pages  and  re- 
sources dynamically  using  drag  & drop  and 
Adobe’s  proprietary  Point  & Shoot  technology. 


The  Color  Palette  lets  you  drag  & drop  colors  on 
your  HTML  objects. 
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Web  Page  Design 
Tools 

The  Toolbar 


The  Palette 

The  Basic  Tags  Tab  of  the  Palette 


Adobe  GoLive’s  page  building  environment  contains  four  major  tools 
you  will  use  for  building  Web  pages  (seethe  preceding  screenshot  for 
reference). 


The  context-sensitive  Toolbar  changes  with  the  current  selection: 

• While  you  are  working  with  normal  HTML  tags  and  text,  the  Text 
Toolbar  offers  the  text  formatting  tools  shown  below  (see 

page  123  for  more  details). 

PI  | Header  I i 1 1 a | =Tsl  fTHTirTI  | 3 i 1 |Til|7fl[?s)[TT]  f551M  IH  D . 

• While  you  are  working  with  objects  on  a layout  grid,  the  Layout 
Grid  Toolbar  offers  the  alignment  and  grouping  tools  shown 
below  (see  page  114  for  more  details). 

|?|tj|ao  II 112  | J|32  ||32  I ||_i  IElO  ElBEf]  : I ; (cg]L  4 g]  CU  g{-| 

• When  you  are  working  with  the  Site  window  as  the  front-most 
window,  the  Site  Toolbar  offers  tools  to  manage  files  and  FTP 
them  to  or  from  your  Web  server. 

°|  [g) l. QC  . '■  J ; j B B IM1I53  \JD Bglgg  FFTaI BSD  D ^ -| 


The  Palette  window  holds  iconized  representations  of  tags  that  can 
be  inserted  in  your  document. 


There  are  two  ways  to  insert  tags: 

• Drag  & drop  lets  you  insert  a tag  into  an  HTML  flow  or  on  a lay- 
out grid  by  clicking  it  in  the  Palette,  dragging  it  to  the  desired 
location,  and  releasing  the  mouse  button. 
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• Double-clicking  an  icon  in  the  Palette  lets  you  insert  a tag  or 
object  at  the  current  cursor  location  in  the  HTML  flow  or  in  the 
upper  left  corner  on  the  currently  selected  layout  grid. 

Because  this  chapter  focuses  on  adding  content  to  pagesand  format- 
ting itfor  maximum  visual  impact,  it  only  dealswith  thefirstand  the 
last  tabs  of  the  Palette.  These  tabs — the  Basic  Tags  and  Custom 
tabs — contain  the  following  tools: 

The  Basic  Tags  Tab 

The  Basic  Tags  tab  contains  everything  you  need  to  build  pages,  in- 
cluding the  layout  grid,  floating  boxes,  tables,  and  images.  For  fur- 
ther details,  please  refer  to  the  instructions  starting  on  page  110. 


The  Custom  Tab 


The  Custom  tab  lets  you  store  frequently  used  objects  for  insertion 
into  your  page  and  keeps  them  handy,  while  offering  full  drag  & 
drop  convenience.  You  can  drag  almost  any  desired  item  on  the  Cus- 
tom tab  to  store  it  there.  The  Custom  tab  accepts  anything  from  sim- 
ple images  to  composite  objects  (for  example,  a layout  grid  packed 
with  text,  images,  and  lines),  with  the  exception  of  text  from  HTML 
text  flows. 

The  Custom  tab  stores  all  objects  complete  with  their  URLs,  at- 
tributes, and  other  definitions.  Thumbnail  previews  help  the  user 
identify  the  desired  item. 


The  Custom  Tab  of  the  Palette 


Click  here  to  open  the  Custom  tab. 

Drag  any  desired  object  to  the  Custom  tab  to  store 
it  for  future  use. 


To  store  an  object  for  future  use,  proceed  as  follows: 

1 Drag  the  object  from  the  docu  ment  window  onto  the  Custom  tab. 
If  the  Custom  tab  is  not  open,  drag  the  object  on  the  tab  first,  wait 
for  the  Custom  tab  to  open,  then  drag  it  onto  the  storage  area. 
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The  Palette  Item  Editor 

Use  this  text  box  to  name  the  newly  inserted  item 
on  the  Custom  tab. 


Building  Web  Pages 


2  After  dropping  the  object  on  the  Custom  tab,  double-click  it  for 
renaming.  Double-clicking  an  item  opens  the  Palette  Item  Editor. 


3 Place  the  cursor  in  the  Item  Name  text  box,  type  in  a descriptive 
name,  and  click  OK  to  confirm  your  entry. 

4 To  place  an  object  from  the  Custom  tab  in  your  document,  simply 
drag  it  from  the  tab  and  drop  it  at  the  desired  location  on  a lay- 
out grid  or  in  the  HTML  text  flow. 

5 To  delete  an  object  from  the  Custom  tab,  select  it  and  press  the 
Delete  or  Backspace  key. 

A text  field  at  the  bottom  of  the  Palette  will  display  the  name  of  the 
item  at  the  current  cursor  location  to  help  the  user  identify  individ- 
ual elements. 


Other  Tabs  in  the  Palette 


The  remaining  tabs  contain  other  collections  of  tools  that  are  de- 
scribed in  other  chapters. 


The  Forms  Tags  tab  contains  all  you  need  to  create  forms.  For  more  details,  see  Chapter  9, 
Working  with  Forms,  starting  on  page  445. 


□ The  Fiead  tab  includes  a variety  of  structure  tags  that  provide  document-related  informa- 
tion to  the  browser.  For  additional  details,  please  refer  to  Chapter  10,  Working  with 
Head  Tags,  starting  on  page  483. 

BThe  Frames  tab  contains  a collection  of  frames  and  frame  sets  you  can  use  to  structure  your 
page  layout.  Please  refer  to  Chapter  8,  Working  with  Frames,  starting  on  page  429  for  more 
details. 


© 
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The  Site  tab  features  a selection  of  generic  site  elements  for  site  management.  It  does  not 
contain  any  HTML  objects  that  can  be  used  to  build  pages.  For  more  information,  see  sec- 
tion "The  Site  Tab"  on  page  611  in  chapter  “Managing  Web  Sites  with  Adobe  GoLive“. 

The  Extra  tab  is  a companion  tab  to  the  Site  Window.  It  contains  stationery  you  can  use  for 
designing  sites  as  well  as  pages  or  page  fragments  you  want  to  use  for  dynamic  components. 
For  more  information,  s eeChapter5,  Dynamic  HTML,  starting  on  page  229,  and  Chapter  17, 
Managing  Web  Sites  with  Adobe  GoLive  starting  on  page  605. 


The  CyberObjects  tab  contains  a selection  of  ready-to-use  script  objects  that  add  dynamic 
[yfj  behavior  to  Web  pages.  For  more  information,  see  Chapter  5,  Dynamic  HTML,  starting  on 
page  229. 


a The  WebObjects  tab  contains  a group  of  ready-to-use  WebObjects  tags  that  let  you  build  dy- 
namic pages.  For  more  details,  please  refer  to  the  separate  manual  shipped  with  Adobe 
GoLive,  Using  Web  Objects  with  Adobe  GoLive. 
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Collapsing  the  Palette 

When  you  don’t  need  the  Palette,  you  can  temporarily  collapse  it  by 
dragging  it  to  the  right  edge  of  the  screen.  The  icon  at  the  left  ap- 
pears, indicating  that  the  Palette  has  been  collapsed.  To  reopen  the 
Palette,  simply  click  this  icon.  You  can  also  collapse  the  Palette  by 
clicking  in  its  Title  bar. 


The  Inspector 


The  Inspector  Window 


Interaction  Between  the  Palette  and 
Inspector  Windows 


Accompanying  each  element  dropped  in  your  page  is  a context-sen- 
sitive Inspector  window  that  allows  you  to  directly  view,  edit,  and 
modify  the  attributes  of  objects  on  your  page,  such  as  images,  Java 
applets,  and  links.  The  Inspector  relieves  you  of  the  burden  of  click- 
ing OK  repeatedly  in  multilevel  dialog  boxes,  helping  you  maximize 
your  productivity. 


When  you  insert  a tag  or  object,  the  proper  set  of  options  pops  up  in  the 
Inspector  window  (if  the  window  is  open),  allowing  you  to  set  your  tag 
options.  The  following  screenshot  illustrates  this  interaction  between 
the  Palette  and  Inspector  windows. 


Inserting  the  Image  icon  from  the  Palette  onto  the  document  opens  the  Image  Inspector  (right). 
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Collapsing  the  Inspector 

When  you  don’t  need  the  Inspector,  you  can  temporarily  collapse  it 
by  dragging  it  to  the  right  edge  of  the  screen.  The  icon  at  the  left  ap- 
pears to  indicate  that  the  Inspector  has  been  collapsed.  To  reopen 
the  Inspector,  click  this  icon.  You  can  also  collapse  the  Palette  by  Con- 
trol-clicking in  its  Title  bar. 


The  Color  Palette  The  Color  Palette  offers  a variety  of  different  color  spaces  to  make 

sure  your  audience  sees  the  colors  you  want  them  to  see.  Coloring 
objects  is  a drag  & drop  process.  Chapter  11  presents  a detailed  de- 
scription of  the  Color  Palette,  starting  on  page  499. 


Other  Tools  The  Layout  View  Controller 

The  Layout  View  Controller  window  provides  options  for  controlling 
the  display  properties  of  your  pages  in  Layout  view.  By  enabling  or 
disabling  selected  display  attributes,  you  can  customize  the  screen 
display  to  meet  your  needs  and  preview  low-resolution  images. 

The  Layout  View  Controller 


This  checkbox  toggles  the  display  of  line  breaks 
and  other  invisible  characters  on  and  off. 


This  checkbox  toggles  the  display  of  broken  links 
on  and  off. 


This  checkbox  toggles  the  display  of  images  on 
and  off. 

This  checkbox  toggles  between  normal  and  low- 
resolution  images  on  and  off. 


This  checkbox  toggles  the  previewing  support 
through  Cascading  Style  Sheets  on  and  off. 


_r 


To  use  the  basic  options  for  customizing  the  screen  display  of  your 
pages,  proceed  as  follows: 

1 Click  the  small  “eye”  icon  * above  the  main  window  area  to 
open  the  Layout  View  Controller. 

2 Select  or  deselect  the  Show  Invisible  Items  checkbox  to  have 
Adobe  GoLive  display  or  hide  line  breaks,  comment  icons,  and 
other  invisible  items. 
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This  option  is  equivalent  to  the  Show  Invisible  Items  command  in 
the  Edit  menu. 

3 Select  the  Show/Hide  Link  Warnings  checkbox  to  have  Adobe 
GoLive  mark  up  broken  links  within  your  page. 

This  option  is  equivalent  to  the  Link  Warnings  button  ffl  in  the 
Toolbar  and  the  same  command  in  the  Edit  menu. 

4 Select  or  deselect  the  Show  Images  checkbox  to  have  Adobe 
GoLive  show  or  hide  images  in  Layout  view. 

• With  the  Show  Images  option  checked,  select  the  Show  low 
source  imgs  checkbox  to  have  Adobe  GoLive  display  low-resolu- 
tion images  in  Layout  view. 

Chapter  6,  Cascading  Style  Sheets,  starting  on  page  323  explains  the 
options  in  the  Use  Stylesheets  section  of  the  window. 


Layout  Rulers 


Ru  ers  in  Layout  View 


Clicking  the  ruler  symbol  toggles  the  display  of 
rulers  on  and  off. 


A white  area  on  either  ruler  indicates  the  size  of 
the  current  object. 


Rulers  scaled  in  pixels  help  you  position  objects 
on  a layout  grid. 


Adobe  GoLive’s  Layout  view  features  top  and  left  rulers  with  a pixel 
scale  that  help  you  place  objects  with  precision.  While  you  drag  to  re- 
size or  move  an  object  on  a Layout  Grid,  lines  in  the  rulers  move 
along  to  indicate  the  size  and  current  position.  Additionally,  two 
white  areas  on  the  horizontal  and  vertical  rulers  indicate  the  size  of 
the  currently  selected  object. 


You  can  turn  rulers  on  and  off,  as  required,  by  clicking  at  the  ruler 
symbol  above  the  right-hand  scrollbar  of  the  document  window. 
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Interactive  Resizing 


You  can  resizean  object  by  dragging  with  the  mouseand  have  Adobe 
GoLive  update  the  display  in  real  time. 

If  the  object  is  within  an  HTML  text  flow,  Adobe  GoLive  automatically 
maintains  spacing  between  objects  while  you  resize. 

To  use  interactive  resizing  with  any  object,  proceed  as  follows: 

1 Control-click  any  object  handle  to  resize,  or  Control-Shift-click 
the  handle  to  resize  proportionally. 

2 Adobe  GoLive  updates  the  display  of  the  object’s  content  while 
you  resize.  In  an  HTML  text  environment,  surrounding  objects 
and  text  are  pushed  away  while  you  drag,  maintaining  interob- 
ject spacing. 

3 You  can  return  to  non-visual  resizing  by  releasing  the  Control  key 
while  you  are  dragging. 

You  can  also  return  to  non-proportional  resizing  by  releasing  the 
Shift  key  while  you  are  dragging. 


Chapter  Overview  In  addition  to  the  preceding  introductory  sections,  this  chapter  con- 

tains four  major  sections  that  detail  how  to  create  pages  and  use 

Adobe  GoLive’s  wide  selection  of  basic  tags: 

• Part  7 — Basic  Steps,  starting  on  page  93,  explains  how  to  create 
a new  page,  use  foreign-language  encodings,  set  basic  prefer- 
ences for  your  Web  page  design  environment,  and  set  up  Web 
pages. 

• Part  8 — Basic  HTML  Tags,  starting  on  page  110,  introduces 
basic  Web  page  design  elements,  such  as  the  layout  grid,  text, 
images,  and  tables. 

• Part  9 — Advanced  Tags,  starting  on  page  185,  presents  Adobe 
GoLive’s  built-in  JavaScript  editor  and  teaches  how  to  embed 
advanced  Web  page  design  elements,  such  as  Java  applets,  plu- 
gins, and  floating  boxes. 

• Part  10  — Internet  Explorer-Specific  Tags,  starting  on  page  217, 
acquaints  you  with  the  two  Internet  Explorer  elements  sup- 
ported by  Adobe  GoLive. 
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Part  7 — Basic  Steps 

The  following  sections  outline  basic  steps  that  need  to  occur  to  cre- 
ate and  set  up  an  HTML  page  before  you  can  start  adding  content. 

Basic  steps  include  the  following: 

• The  Creating  a New  Page  section  explains  how  you  can  create  a 
new  empty  page  in  Adobe  GoLive. 

• The  Working  with  Foreign  Languages  section  provides  instruc- 
tions for  selecting  language  encodings  other  than  the  default 
Western  encoding  that  Adobe  GoLive  supports. 

• The  Setting  General  Preferences  section  deals  with  several  general 
settings  that  influence  display  colors  and  other  important  prop- 
erties. 

• The  Making  Basic  Page  Settings  section  details  how  to  set  up  the 
basic  properties  of  an  HTML  page,  including  the  title,  back- 
ground color,  or  image,  it  also  includes  instructions  for  saving 
the  page  as  an  HTML  fragment. 


Useful  Tips  Before  you  get  started,  have  all  the  graphics  and  media  items  you 

want  to  use  in  place.  At  this  point,  you  should  know  what  your  pages 
will  look  like  and  what  they  will  contain. 

You  should  also  consider  collecting  all  items  you  want  to  use  in  your 
site  in  the  Site  Window.  This  tool  makes  it  easier  for  you  to  keep  track 
of  your  pages  and  media  items  as  your  site  grows.  For  details  on  site 
management,  see  Chapter  17,  Managing  WebSites  with  Adobe  GoLive. 
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Creating  a New  Page 


To  create  a new  page,  select  New  from  the  File  menu,  or  press  Com- 
mand-N. 


Selecting  the  New  and  Open  Commands 
from  the  File  Menu 


New  Site.~ 

■*S#N 

Import  Site  Folder. 

New  Special 

► 

Open... 

*0 

Open  Recent  Files 

► 

Close 

sew 

Save 

Save  As... 

O&S 

Revert  to  Saved 

Document  Encoding  ► 

FTP  Upload  & Download... 

Web  Download... 

0*0 

Page  Setup... 

Print... 

&p 

Quit 

&Q 

Working  with  Foreign 
Languages 


Text  Encoding  Converter,  Apple’s  language  support  technology,  and 
Adobe’s  proprietary  CS  Encodings  make  Adobe  GoLive  the  premier 
Web  publishing  package  for  multilingual  Web  sites. 

The  Mac  Encodings  and  CSEncodings  modules  installed  in  Adobe 
GoLive’s  Modules  folder  are  special  modular  software  components 
based  on  Apple’s  language  support  technology.  They  enable  Adobe 
GoLive  to  handle  multiple  language  character  sets,  including  Latin, 
Japanese,  Chinese,  Arabic,  and  Devanagari,  including  scripts  that  run 
from  left  to  right  and  those  that  run  from  right  to  left.  Language  sup- 
port allows  Web  authors  to  create  true  “world”  sites  with  dedicated 
pages  for  each  language. 

The  comprehensive  support  for  encodings  ensures  that  pages  cre- 
ated with  Adobe  GoLive  cover  all  major  language  groups,  plus  vari- 
eties of  the  Unicode  multilingual  encoding  scheme,  on  all  major 
operating  system  platforms. 

This  feature  is  particularly  useful  for  multilingual  sites  addressing  a 
worldwide  audience.  By  selecting  a language,  you  can  instruct  lan- 
guage-savvy Web  browsers  to  use  the  proper  character  set  when 
reading  your  page. 
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Things  to  Remember 
When  Writing  Foreign- 
Language  Text  in  Adobe 
GoLive 


When  you  install  the  English  version  of  Adobe  GoLive,  any  page  you 
create  defaults  to  the  CS-Western  (Latin  1)  encoding.  If  the  text  on 
your  pages  uses  any  Western  language  (using  Adobe  GoLive  or  a Mac- 
intosh-based word  processor),  such  as  U.S.  or  British  English,  Ger- 
man, French,  Spanish,  or  Swedish,  you  do  not  need  to  change  this 
selection.  You  can  type  text  directly  in  Adobe  GoLive’s  document  win- 
dow. 

To  use  Adobe  GoLive  for  creating  content  in  a foreign  language  with 
a different  script  system,  you  need  the  appropriate  foreign-language 
script  system  software  and  fonts  for  the  Macintosh.  Typing  text  in 
Japanese,  for  example,  requires  Apple’s  Japanese  Language  Kit™  or 
an  equivalent  system  enhancement. 

If  pages  in  your  site  will  contain  text  written  in  other  languages,  such 
as  Chinese,  Japanese,  Arabic,  or  Russian,  you  must  select  the  proper 
encoding  when  creating  a page  in  Adobe  GoLive  in  order  for  them  to 
be  and  remain  readable.  The  next  section  addresses  readability 
problems  caused  by  incompatible  encodings. 


Things  to  Remember 
When  Importing  Foreign- 
Language  Text  Files  from 
Other  Sources 


Adobe  GoLive  is  a typical  Macintosh  application  in  that  it  uses  Apple’s 
proprietary  foreign-language  encodings  for  text  entry  and  display. 
Unlike  other  Macintosh  applications,  however,  Adobe  GoLive  is  a 
multilingual  editor  for  Web  pages,  which  may  come  with  any  for- 
eign-language encoding.  Adobe  GoLive  builds  a bridge  between  en- 
codings used  on  the  World  Wide  Web  and  Apple’s  proprietary 
foreign-language  encodings.  It  reads  from  any  HTM L file  with  the 
proper  encoding  information  in  its  header,  converts  the  text  content 
to  Apple’s  internal  encodings  (which  it  must  use  as  a normal  Macin- 
tosh application)  while  you  edit  in  Layout  mode,  and  converts  back 
to  the  specified  encoding  when  you  save. 

Importing  Latin  text  from  Macintosh-based  word  processors  is  easy 
because  it  always  comes  in  the  respective  MacOS  encoding.  You  can 
either  copy  and  paste  text  between  both  applications  or  open  plain 
text  files  (files  saved  as  text-only  without  any  formatting)  in  a dedi- 
cated window,  then  use  drag  & drop  to  copy  text  to  Adobe  GoLive’s 
document  window. 

Importing  Latin  text  from  other  platforms  requires  a text  converter. 
(Many  Windows-based  word  processors  can  also  save  in  a Macintosh 
format,  although  the  results  are  not  always  predictable.) 


96 


Building  Web  Pages 


CHAPTER  4 


To  create  text  content  in  a language  with  two-byte  characters — for 

example,  Japanese — using  an  external  text  editor  or  word  processor, 

proceed  as  follows: 

1 Set  the  language  and  font  preferences  for  the  foreign-language 
script  system,  as  outlined  below  in  the  section  Language  and  Font 
Preferences. 

2 Create  a new  Web  page  in  Adobe  GoLive.  The  result  is  an  HTML 
file,  complete  with  the  <HEAD>  and  <BODY>  structure. 

3 Select  an  encoding  that  is  equivalent  to  the  internal  Macintosh 
encoding — for  example,  Japanese  (Shift  JIS) — to  add  that  meta 
information  to  the  header  section. 

4 Save  the  file  and  edit  in  the  text  editor  or  word  processor.  Be  sure 
you  do  not  type  over  any  of  the  HTML  tags. 

If  your  text  contains  characters  that  are  used  in  the  HTML  syntax, 
such  as  “<”,  “>”,  and  etc.,  you  must  enter  them  using  the 
proper  notation  for  HTML  special  characters,  such  as  “&lt;”, 
“&gt;”,  “&amp;”;  otherwise,  Adobe  GoLive  will  interpret  them  as 
HTML  tags  when  it  reads  the  text-only  file. 

5 When  you  finish  editing,  return  to  Adobe  GoLive,  choose  Open 
from  the  file  menu  and  Japanese  (Shift  JIS)  from  the  Document 
Encoding...  menu  in  the  Open  dialog  box,  then  open  the  file. 

6 Your  Japanese  text  should  be  fully  intact,  and  you  can  proceed  to 
laying  out  your  page. 

7 When  you  are  done  laying  out  your  pages  in  Adobe  GoLive,  you 
can  save  it  in  another  encoding-tor  example,  Japanese  (ISO  2022- 

n 


If  you  have  received  foreign-language  text  files  created  on  an- 
other platform,  you  need  a text  converter  application.  When 
opening  a text  file,  Adobe  GoLive  does  not  know  how  the  text 
is  encoded  because  text  files  do  not  contain  any  meta  informa- 
tion on  language  usage.  In  this  case,  Adobe  GoLive  will  use  the 
default  encoding  selected  in  the  Preferences  (see  Encodings 
Preferences  on  page  98),  which  may  render  the  text  unread- 
able. 


Language  and  Font  Preferences 
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Things  to  Know  About 
Foreign-Language  Text 
Shown  in  Source  Mode 


In  order  for  foreign-language  text  to  be  readable  in  Adobe  GoLive’s 
Source  view,  it  must  have  an  encoding  equivalent  to  the  internal  en- 
coding used  by  the  MacOS,  as  is  the  case  with  Japanese  MacOS  or 
Japanese  (Shift  JIS).  The  Source  mode  displays  the  original  text  con- 
tent of  a file  without  any  conversion  to  an  internal  format,  so  text 
written  ina  non-Macintosh  encoding,  such  asjapanese  (ISO  2022-JP), 
will  not  appear  in  readable  form.  This  may  look  confusing,  but  the 
sequence  of  Escape  sequences  and  ASCII  characters  shown  is  still  val- 
id code. 


Please  note  that  switching  encodings  while  in  Source  mode 
changes  the  character  set  information,  not  the  encoding  infor- 
mation, for  the  current  page. 


Selecting  a 
Language 


To  select  a language  for  a page  created  in  Adobe  GoLive,  go  to  the  File 
menu  and  choose  Document  Encoding. ... 


The  Document  Encoding  Menu  Command 


You  can  control  the  content  of  the  Document 
Encoding  submenu  by  adding  or  deleting  en- 
codings in  the  Preferences  dialog. 


New 

*N 

New  Site... 

■^*N 

Import  Site  Folder. 

New  Special 

► 

Open... 

*0 

Open  Recent  Files 

► 

Close 

*w 

Save 

38S 

Save  As... 

oaes 

Revert  to  Saved 

FTP  Upload  & Download... 

Web  Download... 

•088  0 

Page  Setup... 

Print... 

3§P 

Quit 

88Q 

CS-Western  (Mac  Rom  tin) 
CS-Western  (NeXTStep) 

Western  (Mac  OS  Roman) 
Western  (Windows  Latin  1) 
Icelandic  (Mac  OS) 

Turkish  (Mac  OS) 

Turkish  (Windows  Latin  5) 
Croatian  (Mac  OS) 

Romanian  (Mac  OS) 

CS-Japanese  (EUC-JP) 
CS-Japanese  (Shift-JIS) 
CS-Japanese  (ISO-2022-JP) 
Japanese  (Mac  OS) 

Japanese  (ISO  2022-JP) 
Japanese  (EUC) 

Japanese  (Shift  JIS) 
CS-Traditional  Chinese  (Big  5) 
Traditional  Chinese  (Mac  OS) 
Traditional  Chinese  (Big  5) 
Traditional  Chinese  (EUC) 
CS-Simplified  Chinese  (GB  2312) 
Simplified  Chinese  (Mac  OS) 
Simplified  Chinese  (IS0  2022-CN) 
Simplified  Chinese  (EUC) 

CS-'  ean  (K  ‘5601  E>  R) 

K'  'M' 


Language  and  Font  Adobe  GoLive  features  two  Preferences  dialog  boxes,  Encodings  and 
Preferences  Fonts,  that  let  you  select  a default  language  script,  customize  the 

Document  Encoding  submenu,  and  set  default  fonts. 
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Encodings  Preferences 


The  Preferences  - Encodings  d ialog  box  accommodates  Adobe  GoLive’s 
multiple  encoding  options  (see  below). 


I he  Preferences  - tncodmgs  Dialog  Box 


Click  this  icon  to  view  the  Encodings  preferences. 


Click  the  check  box  to  toggle  an  encoding 
scheme  on  and  off,  or  click  its  name  to  select  a 
default  encoding. 


Use  this  checkbox  to  eliminate  the  language 
information  from  the  HTML  page  header. 


Type  in  the  number  of  bytes  you  want  the 
program  to  search  for  language  information  in 
the  HTML  page  header. 


Preferences 


[yd  General 
Modules 

A Fonts 

^ Co  lor  Sync™ 
IT~1  LiveObjects 
© Site 
5H  Browsers 

> gl  Find 

[>  (EJ  Spell  Checking 
Plugins 

t>  ^ Network 

> ^ Source 


Script /Encoding 


^ 0 

Vestern 

— 

0 

^■CS-Yestern  (Latin  1 )|f®| 

0 

CS-Vestern  (MacRoman) 

_rU 

Vestern  (Mac  OS  Roman) 

0 

Vestern  (Vindows  Latin  1 ) 

0 

Icelandic  (Mac  OS) 

0 

Turkish  (Mac  OS) 

0 

Turkish  (Vindows  Latin  5) 

0 

Croatian  (Mac  OS) 

▼ 

0 Default  Encoding 

Use  Charset  Info 


Scanning  Limit  | 1 024  j Characters 


| Cancel  | ||  OK  |) 


You  can  select  a default  encoding,  or  enable  or  disable  encodings  to 
customize  the  choices  that  the  Document  Encoding  command  in  the 
File  menu  offers,  and  choose  whether  or  not  the  HTML  page  header 
should  contain  encoding  and  character  set  meta  information. 

To  select  a default  encoding  that  will  be  used  whenever  you  create  a 
new  document  in  Adobe  GoLive,  proceed  as  follows: 

1 Choose  the  Preferences  command  from  the  File  menu  or  press 
Command-Y. 

2 Click  the  Encodings  icon  in  the  icon  box  to  the  left.  If  the  icon  is 
invisible,  you  may  have  to  scroll  it  into  view. 

3 In  the  Encoding  list  box,  click  the  name  of  the  encoding  option  of 
your  choice,  then  click  the  Default  Encoding  checkbox  below  the 
encodings  list.  The  name  of  the  encoding  option  will  appear  in 
boldface  and  underlined  to  indicate  the  default  selection. 

Alternatively,  you  can  double-click  the  name  of  the  encoding  option 
to  make  it  the  default  selection. 


Language  and  Font  Preferences 
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To  turn  individual  encodings  on  and  off  in  the  Document  Encoding 

submenu,  proceed  as  follows: 

1 Choose  the  Preferences  command  from  the  Edit  menu  or  press 
Command-Y,  then  open  the  Encodings  group  of  preferences  as 
set  out  above. 

2 In  the  Encodings  dialog  box,  locate  the  desired  encoding  option 
and  click  the  checkbox  next  to  it  to  enable  or  disable  the  item  of 
your  choice.  Encodings  are  disabled  if  unchecked  and  enabled  if 
checked,  respectively. 

3 To  use  a newly  enabled  encoding  scheme,  simply  choose  it  from 
the  submenu  of  the  Document  Encoding  command  in  the  File 
menu. 


To  determine  whether  to  include  encoding  and  character  set  infor- 
mation in  the  HTML  page  header,  proceed  as  follows: 

1 Select  the  Use  Charset  Info  checkbox  at  the  bottom  of  the  dialog 
box  to  have  Adobe  GoLive  includetheencodingand  character  set 
information  in  the  CONTENT  attribute  of  the  META  tag.  Deselect 
this  checkbox  to  eliminate  the  language  information  from  the 
HTML  page  header. 

2 In  the  Character  Scan  Limit,  type  in  an  appropriate  number  of 
bytes  that  you  want  Adobe  GoLive  to  search  for  encoding  and 
character  set  information  when  it  opens  a file.  Deselect  the  Use 
Charset  Info  checkbox  to  automatically  disable  this  text  box. 
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The  Preferences  - Fonts  Dialog  Box 


Click  this  icon  to  view  the  Fonts  preferences  for 
the  individual  script  systems. 


Fonts  Preferences 

The  Encodings  group  of  options  has  a companion  Fonts  dialog  box 
that  allows  for  selecting  default  proportional  and  monospaced  fonts 
for  each  encoding  system.  It  also  includes  options  for  setting  the  Ser- 
if, Sans  Serif,  Fantasy,  and  Cursive  fonts  used  in  Cascading  Style 
Sheets. 


Preferences 


| Cancel  | ||  OK  || 


To  select  default  fonts  for  an  encoding  system,  proceed  as  follows: 

1 Go  to  the  Edit  menu  and  choose  Preferences.  Click  the  Fonts  icon 
in  the  scrollable  icon  box  to  the  left. 

2 Select  the  desired  script  from  the  list  box. 

3 Select  a typeface  and  font  size  each  from  the  Proportional  Font, 
Monospaced  Font,  Serif  Font,  Sans  Serif  Font,  Cursive  Font,  and 
Fantasy  Font  popup  menus  below  the  list  box. 

4 If  desired,  click  the  Font  Sample  triangle  control  to  open  a pre- 
view pane  that  reflects  the  choices  you  make. 

5 Click  OK  to  confirm  your  selections. 


To  display  the  foreign-language  fonts  in  the  Font  popup  menu, 
you  must  install  them  correctly  on  your  computer.  Please  con- 
sult the  documentation  that  came  with  your  Macintosh  for  in- 
formation on  installing  fonts. 


Setting  General  Preferences 
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Setting  General  Adobe  GoLive  Preferences  dialog  box  offers  many  options  for  custom- 

PreferenceS  izing  ^e  Pr°grams  behavior,  including,  for  example,  its  ability  to 

recognize  files  as  HTML  pages. 


The  Preferences  - General  Dialog  Box 


Click  this  icon  to  display  the  General  Preferences. . 

Use  this  popup  menu  to  instruct  Adobe  GoLive 
what  to  do  at  launch  time. 

Use  this  popup  menu  to  instruct  Adobe  GoLive  - 
which  view  to  open  at  launch  time. 

Use  this  option  to  specify  a default  page  to  be 
opened  at  launch  time. 


Use  this  option  to  turn  the  creator  meta  informa- 
tion on  and  off. 


Preferences 
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Browsers 
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Document 

- At  Launch  [ Do  Nothing 

Default  Mode  | Layout 


ID 


| | New  Document 


0Vrite  'Generator  Adobe  GoLive' 


Cancel  | ||  OK 


To  set  preferences,  proceed  as  follows: 

1 Go  to  the  Edit  menu  and  choose  Preferences.  Click  the  General 
icon  in  the  scrollable  icon  box  to  the  left.  (You  may  have  to  scroll 
the  window.) 

2 The  At  Launch  popup  menu  in  the  Documents  section  helps  you 
customize  Adobe  GoLive’s  behavior  at  launch  time.  The  following 
options  are  available: 

- Create  New  Document  opensanempty  HTML  page  containing 
nothing  but  the  basic  HTML,  HEAD,  and  BODY  sections. 

- Show  Open  Dialog  prompts  you  to  select  an  existing  file. 

- Do  Nothing  opens  Adobe  GoLive  without  creating  a new  doc- 
ument or  letting  you  choose  one. 
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Source 

Outline 

Preview 


Frame  Preview 


3 The  Default  Mode  popup  menu  in  the  Document  section  lets  you 
select  a default  view  for  Adobe  GoLive  to  open  in,  listing  all  six 
document  view  modes  supported. 

4 The  New  Document  checkbox  and  text  box  combination  allows 
you  to  opt  for  a default  file  (for  example,  a template  created  by 
clicking  the  Stationery  checkbox  in  the  Finder’s  Get  Info  dialog 
box)  to  use  when  you  create  a new  document  or  when  Adobe 
GoLive  launches  with  the  Create  New  Document  option  selected. 

5 The  Write  “Generator  Adobe  GoLive”  option  lets  you  choose  to 
have  Adobe  GoLive  add  the  meta  information  tag 

<meta  name="generator"  content="adobe  golive">  to  each  file  it 
creates  or  saves. 

6 Click  Ok"  to  confirm  your  selection. 


Making  Basic  Page 
Settings 


You  can  now  make  basic  settings  for  your  page  layout.  Adobe  GoLive 
supports  the  following  options: 

• default  window  size 

• page  title 

• background  image 

• background  color 

• text  color 


Making  Basic  Page  Settings 
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Selecting  a Window  Size 


Selecting  a Default  Window  Size 


Adobe  GoLive  lets  you  select  a default  window  size  to  visually  limit 
the  design  area.  Although  most  visitors  will  have  monitors  with  a vis- 
ible display  area  of  greater  than  640  pixels,  we  recommend  limiting 
the  window  size  to  580  pixels  or  less  to  accommodate  users  with  14- 
inch  monitors.  Consider  this  size  as  the  smallest  common  denomi- 
nator for  the  content  area  of  a Web  page  because  many  users  with 
larger  monitors  don’t  like  the  browser  filling  the  entire  screen  either. 

To  limit  the  visual  display  area,  proceed  as  follows: 

1 Locate  and  pop  up  the  Window  Size  menu  in  the  lower  right  cor- 
ner of  the  document  window. 


i l» 


50 

100 

200 

520 


580  (1 4 ".Monitor) 


780  (17"  Monitor) 
V/indow  Settings... 
462 


2 Select  the  appropriate  size  and  release  the  mouse  button  to  have 
Adobe  GoLive  resize  the  visible  design  area. 


To  set  a default  size  for  all  new  documents  windows  that  you  create, 
proceed  as  follows: 

1 Open  a window  and  customize  its  size. 

2 Select  Window  Settings  from  the  Window  Size  menu  in  the  lower 
right  corner  of  the  document  window. 

All  new  documents  will  open  to  this  size. 


This  setting  is  only  valid  for  your  own  Web  authoring  sessions 
with  Adobe  GoLive.  It  doesn’t  affect  the  window  size  in  the  vis- 
itor’s browser. 
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Giving  Your  Page  a Title 


To  name  your  page,  proceed  as  follows: 

1 Click  the  default  title  Welcome  to  Adobe  GoLive.  Clicking  selects 
the  title  for  renaming. 

2 Type  in  the  desired  page  title  and  press  the  Return  key. 


Naming  a Page 


Click  here  to  select  the  de- 
fault page  title. 


Type  in  a new  page  title 
and  press  Return. 
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Selecting  a Background  Image 


To  select  a background  image,  proceed  as  follows: 

1 Open  the  Inspector  window  if  it  is  closed  by  choosing  Inspector 
from  the  Window  menu  or  pressing  Command -7. 


Click  here  to  open  the 
Page  Inspector. 


n 

= untitled 
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ut  □ 1 E ) Source  [T]  ] | QJ]  ) Preview  □ | [B 

l> 

J Welcome  to  Adobe  Cyber  Studio 

2 Click  the  small  page  icon  in  the  upper  left  corner  of  the  docu- 
ment window.  This  opens  the  Page  Inspector  in  the  Inspector  win- 
dow. 

3 In  the  Page  Inspector,  click  the  checkbox  labeled  Image  and  enter 
the  name  and  path  in  the  text  box. 

Alternatively,  click  the  Browse  button  below  the  text  box  and  select 
an  image  in  the  subsequent  file  selection  dialog. 

You  can  also  select  a background  image  by  clicking  at  the  Point  & 
Shoot  button  and  dragging  to  an  image  file  in  the  Site  Window.  (For 
m o re  d eta  i I s o n t h e Poin  t & Shoot  b u tto n , see  Poin t & Shoot  I nsertlon 
of  Links  and  Anchors  on  page  1 76.) 
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The  Page  Tab  of  the  Page  Inspector 
Window 


Click  these  color  fields,  then  drag  a color  from 
the  Color  Palette  preview  pane  onto  each  color 
field. 


Use  these  options  to  activate  background  at- 
tributes. Click  the  color  field  to  open  the  Color 
Palette  and  select  a color  and/or  an  image. 


Selecting  a Background  Color 


To  select  a background  color  that  overrides  the  default  gray  that 

most  Web  browsers  use,  proceed  as  follows: 

1 Click  the  small  page  icon  in  the  upper  left  corner  of  the  docu- 
ment window.  This  opens  the  Page  Inspector  in  the  Inspector  w\n- 
dow. 

2 In  the  Background  section  of  the  Page  Inspector,  click  the  color 
field  next  to  the  Color  checkbox  to  open  the  Color  Palette  window. 

3 Select  a color  (see  Chapter  77,  The  Color  Palette,  starting  on  page 
499,  for  reference).  Your  chosen  color  will  appear  in  the  preview 
pane  of  the  Color  Palette. 

4 Drag  the  color  from  the  preview  pane  and  drop  it  onto  the  Back- 
ground Color  field  in  the  Page  Inspector  or  on  the  small  page  icon 
in  the  document  window. 

This  will  check  the  Color  checkbox  automatically. 


Selecting  Text  Colors 


To  select  text  colors  that  override  the  default  colors  that  most  Web 
browsers  use,  proceed  as  follows: 

1 Click  the  small  page  icon  in  the  upper  left  corner  of  the  docu- 
ment window.  This  opens  the  Page  Inspector  in  the  Inspector  win- 
dow. 

2 In  the  Page  Inspector,  click  the  desired  color  field  in  the  Text 
Colors  section  to  open  the  Color  Palette: 


- The  Text  option  lets  you  select  a custom  color  for  the  body 
text  on  your  page. 

- The  Link  option  lets  you  pick  a custom  color  for  hyperlinks 
within  the  body  text. 

- The  Active  Link  option  lets  you  choose  custom  color  for  a hy- 
perlink being  clicked  at. 

- The  Visited  Link  option  lets  you  select  a custom  color  for  hy- 
perlinks already  explored. 

3 Select  a color  in  the  Color  Palette  (see  Chapter  77,  The  Color  Pal- 
ette, starting  on  page  499,  for  reference).  The  color  you  choose 
will  appear  in  the  preview  pane  of  the  Color  Palette. 

4 Drag  the  color  from  the  preview  pane  and  drop  it  onto  the  de- 
sired Text  Color  field  in  the  Page  Inspector. 

To  avoid  confusing  your  audience,  don’t  override  the  default 
text  colors  used  by  the  overwhelming  majority  of  Web  sites.  If 
you  do,  we  recommend  that  you  use  a completely  different  set 
of  colors  altogether  and  give  your  audience  a hint,  for  example, 
on  your  homepage. 

HTML  Fragments 

Adobe  GoLive  lets  the  user  work  with  HTML  fragments,  that  is, 
chunks  of  ready-made  HTML  code  that  are  not  embedded  in  the  de- 
fault page  structure. 

This  feature  is  particularly  useful  when  several  authors  work  on  the 
same  page  because  it  eliminates  the  need  to  strip  off  redundant 
HTML  when  merging  code  from  various  sources.  HTML  fragments  are 
also  instrumental  to  building  dynamic  pages  with  WebObjects,  Apple 
Computer’s  object-oriented  environment  for  developing  World  Wide 
Web  applications  (see  the  separate  WebObjects  manual  shipped  with 
Adobe  GoLive).  You  can  also  use  HTML  fragments  to  create  source 
files  for  dynamic  components  (see  Components  on  page  241). 

Strippingoff  the  basic  HTMLskeleton  will  createa  blank  text-only  file 
that  Adobe  GoLive  can  read  from  and  write  to  without  reporting  it  as 
faulty. 
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The  HTML  Tab  of  the  Page  Inspector 


Deselect  these  options  to  create  an  HTML 
fragment. 


□ Page  Inspector @ 

Page  f HTML  ) Pending  ColorSync™  ^ 

Vrite  Page  Tags 
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0 <HEAD> 
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0 <B0DY>  (no  attributes  allowed  to  be  omited) 

JavaScript  Functions 
flS)  Vrite  Code  into  page 
O Import  CS  Library 

Settings  to  use  Page  as  a [ Component  ) 
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To  create  HTML  fragments,  proceed  as  follows: 

1 Create  a new  document  by  selecting  the  New  command  from  the 
File  menu  or  pressing  Command-N. 

2 Click  the  small  document  icon  above  the  main  window  area  to 
open  the  new  FITML  tab  of  the  Page  Inspector. 

3 Deselect  the  appropriate  <FITML>,  <FIEAD>,  <TITLE>  (if  empty), 
and  <BODY>  checkbox  options  to  partly  or  completely  strip  the 
basic  framework  off  the  page. 

4 Save  the  new  document  and  fill  it  with  the  desired  HTML  code. 


The  Pending  tab  of  the  Page  Inspector  lists  pending  hyperlinks  that 
need  to  be  created  after  designing  a site  in  Site  View.  For  a detailed 
description,  see  section  "Turning  Navigational  Links  into  Hyperlinks" 
on  page  683  in  chapter  “Managing  Web  Sites  with  Adobe  GoLive“. 
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Saving  Your  Page 

The  Save  Command  and  Save  Dialog 


Go  to  the  File  menu  and  choose  Save. 


Choosing  the  Save  command 
opens  the  Save  Dialog. 


The  Save  Dialog  lets  you  select  a destination  folder  in  the  site 
folder  or  on  your  volume  as  well  as  the  desired  encoding. 


The  Save  dialog  contains  a Site  popup  menu  that  lets  you  save  your 
page  directly  in  the  site  folder  represented  by  the  overlying  Site  Win- 
dow. 

Things  to  Know  About  File  Naming  Conventions 

• Even  though  you  are  working  on  a Macintosh,  all  files  for  the 
Web  require  a DOS/UNIX  style  file  extension.  Check  with  your 
Web  master  or  Internet  Service  Provider  (ISP)  to  see  if  you 
require  DOS  or  UNIX  style  file  name  extensions  (three  versus  four 
characters). 

Pages  are  usually  .html  (otherwise  .htm) 

- GIF  images  are  usually  .gif  (otherwise  .gif) 

- JPEG  images  are  usually  .jpg  (otherwise  .jpeg) 

If  you  plan  to  transfer  your  site  on  a DOS-formatted  floppy  disk 
or  removable  disks,  be  sure  to  name  your  files  according  to  the 
8.3  DOS  naming  convention  (eight  characters  for  the  file  name 
plus  three  for  the  file  name  extension).  Versions  of  PC  Exchange 
earlier  than  Mac  OS  8.1  truncate  file  names  to  the  8.3  scheme, 
which  will  render  your  hyperlinks  unusable. 

• Most  ISPs  require  you  to  name  your  homepage  as  index.html. 
Please  check  with  your  ISP. 

Web  servers  are  usually  configured  to  find  a “default”  page  in  a 
directory  without  the  need  to  type  the  whole  URL. 

In  other  words,  typing  http://www.adobe.com  is  the  same  as  ht- 
tp://www.adobe.com/index.html  because  the  Web  server  has 
been  configured  to  look  for  a page  entitled  “index.html”  if  a page 
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wasn’t  specified.  The  Web  master  setting  up  the  Web  server  de- 
cides what  the  “default”  page  should  be  named.  Some  Web  mas- 
ters use  “index.html”  while  others  use  “default.html”  or 
“home.html”.  Ask  your  Web  master  (or  the  Web  master  of  your 
ISP)  what  naming  convention  your  server  uses. 

Things  to  Know  About  Case  of  File  Names 

• Most  Web  servers  are  case  sensitive  to  file  names.  Some  Web 
masters  require  that  all  file  names  be  in  lowercase — check  with 
yours  before  starting  your  site.  If  you  use  the  Browse  button  or 
the  Point  & Shoot  method  to  make  your  links,  then  Adobe 
GoLive  will  create  the  link  with  the  same  case  as  your  file  name. 

• The  Macintosh  doesn’t  recognize  that  a file  name  has  changed 
when  you  change  the  case  because  file  names  aren’t  case  sensi- 
tive on  the  Macintosh.  If  you  want  to  change  the  case  of  a file 
that  already  has  a link  made  to  it,  you’ll  have  to  change  another 
character  when  you  change  the  case.  Otherwise,  that  link  will 
continue  to  work  on  the  Mac,  but  won’t  work  on  the  Web. 

• Adobe  GoLive  now  has  a preference  setting  that  makes  it  sensi- 
tive to  changes  in  a file  name’s  case:  Preferences,  General  icon, 
“Check  URL’s  case  sensitive.”  When  this  setting  is  on,  Adobe 
GoLive  will  rewrite  a link  with  the  matching  case  when  you 
change  the  case  of  a file  name. 

Things  to  Know  About  Special  Characters  in  File  Names 

• The  Web  limits  the  use  of  special  characters  in  file  names  more 
than  your  Macintosh  does.  You  can’t  use  the  following  in  file 
names: 

- forward  slash  (/) 

more  than  one  “dot”  (.)- the  only  period  has  to  be  part  of  the 
extension  as  in:  index.html 

- the  hyphen  (-)  as  the  first  character  in  a file  name 

• Furthermore,  some  Web  masters  ban  the  use  of: 

- spaces  in  file  names;  the  underscore  character  (_)  is  often 
used  instead 

- ampersands  (&) 

Check  with  your  Web  master  for  other  characters  to  avoid. 
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Part  8 — Basic  HTML  Tags 

Once  you  finish  with  the  basic  settings,  you  can  start  adding  content 
to  your  page.  To  add  content — formatted  text,  images,  and  the 
like — you  must  type  text  and  insert  objects,  then  format  the  text  and 
set  the  object  display  attributes,  respectively. 

The  following  list  presents  the  basic  tags  you  need  for  creating  Web 
pages: 

• The  Layout  Grid  section,  starting  on  page  111,  introduces  Adobe 
GoLive’s  unique  layout  grid  tool  that  lets  you  position  objects  as 
intuitively  as  any  desktop  publishing  package. 

• The  Inserting  Text  section,  starting  on  page  120,  explains  how 
Adobe  GoLive  lets  you  add  text  to  your  pages. 

• The  Formatting  Text  section,  starting  on  page  123,  outlines 
Adobe  GoLive’s  numerous  text  formatting  tools. 

• The  Tables  section,  starting  on  page  137,  describes  Adobe 
GoLive’s  HTML  table  editor. 

• The  Images  section,  starting  on  page  149,  shows  you  how  to 
insert  images  and  addresses  image  format  issues. 

• The  Clickable  Image  Maps  section,  starting  on  page  162,  demon- 
strates the  use  of  image  maps  with  clickable  hot  spots. 

• The  Florizontal  Lines  section,  starting  on  page  167,  tells  you  how 
to  visually  structure  your  page  by  inserting  horizontal  rules. 

• The  Florizontal,  Vertical,  and  Block  Spacers  section,  starting  on 
page  170,  details  how  to  adjust  fixed  interobject  spacing. 

• The  Unknown  Start  and  End  Tags  section,  starting  on  page  173, 
teaches  you  how  to  handle  unknown  HTML  tags. 

• The  Links  and  Anchors  section,  starting  on  page  175,  explains 
how  you  can  link  objects  on  your  pages  and  introduces  Point  & 
Shoot,  Adobe’s  proprietary  technology  for  visually  creating 
hyperlinks. 

• The  Comments  section,  starting  on  page  182,  describes  how  you 
can  add  hidden  comments  to  your  pages  to  let  other  members 
of  your  workgroup  share  your  knowledge. 

• The  Line  Breaks  section,  starting  on  page  182,  discusses  how  to 
control  multiline  text  flows  around  objects. 
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Layout  Grid 


There  are  three  ways  to  create  or  modify  a web  page.  You  can  use  the 
HTML  source  editor;  you  can  add  text  and  graphics  to  the  page  di- 
rectly; or  you  can  use  the  Layout  Grid.  Using  the  HTML  source  editor 
requires  an  understanding  of  HTML.  Adding  text  and  graphics  di- 
rectly to  a page  allows  it  to  reflow  according  to  the  user's  browser  set- 
tings. If  you  wish  the  text  and  graphics  to  maintain  their  positions 
regardless  of  browser  settings,  then  use  the  Layout  Grid.  The  Layout 
Grid  ensures  that  the  user  will  see  your  layout  exactly  as  you  created 
it.  The  following  section  covers  the  Layout  Grid  and  its  companion 
positioning  tools. 

Your  audience’s  Web  browsers  need  to  support  tables,  or  your  layout 
may  not  appear  as  intended.  HTML  table  support  is  a standard  fea- 
ture built  into  almost  ever  modern  Web  browser.  Obsolete  browsers 
such  as  Netscape  Navigator  2 have  problems  accurately  displaying 
some  tables. 

HTML-savvy  users  may  note  that  Adobe  GoLive  inserts  a <SPACER> 
tag  in  the  HTM  L table  that  constitutes  the  layout  grid.  This  tag  is  used 
purposely  to  combat  a bug  in  Netscape’s  browsers  that  causes  a 
rounding  of  table  widths.  Microsoft  Internet  Explorer  ignores  this  tag 
as  it  should,  so  your  HTML  code  will  display  without  errors  across 
browsers. 


Inserting  a 
Layout  Grid 


The  Layout  Grid  and  Layout  Grid  Icon 


To  insert  a layout  grid,  drag  the  Layout  Grid  icon  from  the  Palette  and 
drop  it  in  your  document. 
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Layout  Grid  Resizing 
Options 


The  grid  will  grow  as  you  add  content,  or  you  can  resize  it  and  add 
content  outside  the  grid.. 

To  resize  the  layout  grid,  proceed  as  follows: 

1 Click  the  edge  of  the  grid  to  display  the  resize  handles  at  the  bot- 
tom and  right  edges  and  the  lower  right  corner. 

2 Click  a handle  and  drag  in  the  desired  direction  to  resize. 


Resizing  a Layout  Grid 


Size  layout  grids  with  your  audience  in  mind.  As  a rule  of 
thumb,  the  width  of  the  grid  should  not  exceed  the  dimensions 
of  a standard  14-inch  monitor  screen.  This  relieves  the  user 
from  excessive  scrolling  and  makes  your  pages  easier  to  han- 
dle, particularly  for  users  who  have  a low-speed  connection. 


Click  a handle,  then  drag  in  the  desired  direction 
to  resize  the  grid. 
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Setting  Layout  Grid 
Properties 

The  Layout  Grid  Inspector 


Once  you  are  finished  resizing,  you  can  set  up  the  grid  using  the  Lay- 
out Inspector.  Whenever  you  click  to  select  a Layout  Grid  in  your  doc- 
ument, the  Layout  Grid  Inspector  appears  in  the  Inspector  window. 


Type  in  the  width  and  height  of  the  layout  grid 
here  or  click  Optimize  to  auto-resize.  ^ 


Type  in  the  horizontal  and  vertical  spacing  be- 
tween the  magnetic  lines  of  the  layout  grid  here. 


Use  the  Align  popup  menu  to  align  the  layout  grid  - 
with  respect  to  the  document  window. 

Use  the  Background  Color  checkbox  and  color 
field  to  assign  background  color  to  layout  grids. 

Check  or  uncheck  the  Snap  checkboxes  to  let  ob-  . 
jects  snap  to  the  magnetic  grid  lines. 

Check  or  uncheck  the  Visible  checkboxes  to  show 
or  hide  the  magnetic  grid  lines. 


Layout  Grid  Inspector 
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To  set  up  the  grid,  proceed  as  follows: 

1 Use  the  Width  and  Height  text  boxes  to  enter  the  desired  size. 

If  you  have  already  placed  items  on  the  layout  grid,  click 
Optimize  to  have  Adobe  GoLive  auto-resize  the  layout  grid. 

2 In  the  Horizontal  text  box,  enter  the  spacing  between  the  hori- 
zontal lines  of  the  grid — for  example,  16  pixels. 

3 Check  the  Snap  checkbox  to  make  the  grid  magnetic,  that  is,  po- 
sition objects  only  at  the  grid  points.  Uncheck  the  checkbox  to 
position  objects  anywhere  on  the  grid. 

4 Check  the  Visible  checkbox  to  have  Adobe  GoLive  display  the  grid, 
or  uncheck  the  checkbox  to  hide  the  grid. 

5 Repeat  Steps  1 through  4 in  the  Vertical  section  of  the  Layout  In- 
spector. 

6 Select  an  alignment  option  from  the  Align  popup  menu.  This  op- 
tion controls  the  position  of  the  layout  grid  with  respect  to  the 
document  window: 

- Default  uses  the  settings  of  the  surrounding  HTML  container 
to  align  the  layout  grid. 

- Left  aligns  the  layout  grid  with  the  left  side  of  the  document 
window. 

- Right  aligns  the  layout  grid  with  the  right  side  of  the  docu- 
ment window. 
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7 Drag  a color  from  the  Color  Palette  or  Site  Colors  tab  of  the  Site 
Window  onto  the  Background  Color  field  of  the  Layout  Grid  In- 
spector. This  will  select  the  Background  Color  checkbox  automat- 
ically. 


Adding  Content  You  are  now  ready  to  add  objects  to  the  layout  grid,  which  offers  the 

same  basic  methods  as  the  document  window: 

• You  can  drag  & drop  to  insert  objects  from  the  Palette. 

• You  can  double-click  an  icon  in  the  Palette.  By  default,  the 
object  will  appear  in  the  upper  left  corner  of  the  layout  grid.  If 
another  object  is  already  occupying  that  space,  it  will  be  auto- 
matically shifted  to  the  right. 

For  detailed  instructions  on  the  objects  available  in  the  Palette, 
please  referto  Part  8 — Basic  HTML  Tags  through  Part  7 0 — Internet 
Explorer-Specific  Tags  in  this  chapter. 


Manipulating  Objects  on  Adobe  GoLive  provides  two  tools  to  help  you  manipulate  objects  on 
the  Layout  Grid  a layout  grid.  Before  placing  objects  on  the  layout  grid,  you  should 

be  familiar  with  the  Layout  Grid  Toolbar  and  the  Multiselection  In- 
spector described  below. 


The  Layout  Grid  Toolbar 

Whenever  you  select  an  object  on  a layout  grid,  the  toolbar  changes 
to  offer  you  a set  of  layout  grid-specific  tools  for  manipulating  ob- 
jects. 


Positioning  and  Duplication  Shortcuts 
on  the  Layout  Grid  Toolbar 

The  Horizontal/Vertical  Position  text  boxes  let  you 
position  objects  by  numerical  entry. 

The  X and  Y size  text  boxes  let  you  resize  objects  by 
numerical  entry. 

The  Horizontal  Alignment  buttons  control  the 
alignment  of  an  object  on  the  grid:  left,  centered, 
and  right. 

The  Vertical  Alignment  buttons  control  the  align- 
ment of  an  object  on  the  grid:  top,  centered,  bot- 
tom. 

The  Group/Ungroup  buttons  let  you  arrange  mul- 
tiple objects  in  groups  and  break  up  groups. 
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The  text  boxes  and  buttons  on  the  Layout  Grid  Toolbar  let  you  align 
and  position  selected  objects  with  respect  to  the  grid.  The  toolbar 
also  includes  options  for  resizing  objects  and  grouping  or  ungroup- 
ing. 

Function 

The  Horizontal  Position  text  box  (left  box  of  pair)  allows  for  positioning  selected  objects 
horizontally  from  the  left  margin  of  the  layout  grid. 


The  Vertical  Position  text  box  (right  box  of  pair)  allows  for  positioning  selected  objects  ver- 
tically from  the  top  of  the  layout  grid. 

The  Horizontal  Size  text  box  (left  box  of  pair)  sets  the  horizontal  size  of  a selected  object. 


The  Vertical  Size  text  box  (right  box  of  pair)  sets  the  vertical  size  of  a selected  object. 


Button 


tl  |so 
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The  Align  Left  button  moves  the  selected  object  to  the  left  margin  of  the  layout  grid. 


GD 


The  Align  Center  button  moves  the  selected  object  horizontally  to  the  middle  of  the  layout 
grid. 


E 


The  Align  Right  button  moves  the  selected  object  to  the  right  margin  of  the  layout  grid. 


The  Align  Top  button  moves  the  selected  object  to  the  top  of  the  layout  grid. 


This  Align  Center  button  moves  the  selected  object  vertically  to  the  middle  of  the  layout 
grid. 


The  Align  Bottom  button  moves  the  selected  object  to  the  bottom  of  the  layout  grid. 


The  Group  button  lets  you  arrange  multiple  objects  in  a group  that  can  be  moved, 
aligned,  or  copied  without  selecting  individual  items. 


E 


The  Ungroup  button  splits  up  groups  formed  with  the  Group  button,  so  you  can  select 
each  object  individually. 


You  disable  individual  buttons  when  you  select  an  object  be- 
cause objects  on  a layout  grid  cannot  overlap.  Adobe  GoLive 
will  not  let  you  move  a selected  object  to  the  margin  or  center 
of  the  layout  grid  if  another  item  is  in  the  way,  occupying  the 
space  needed  to  move  it. 
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Aligning  and  Resizing  Objects  with  the  Multiselection  Inspector 

Whenever  you  select  more  than  one  object  on  a layout  grid,  the  Mul- 
tiselection Inspector  appears  in  the  Inspector  window,  offering  you 
object  alignment  and  intelligent  resizing  tools.  The  Multiselection  In- 
spector has  two  tabs,  Alignment  and  Special. 

The  buttons  and  text  boxes  in  the  Alignment  tab  are  explained  below. 


The  Alignment  Tab  of  the 
Multiselection  Inspector 


Click  any  button  to  align  objects  horizontally. 
Click  any  button  to  align  objects  vertically. 


Click  this  button  to  resize  selected  objects  to 
match  the  size  of  the  object  selected  first. 


□ Multi  selection  Inspector  _Ej 

Alignment  \ Special 

Relative  Alignment 

- Horizontal 

- Vertical 


Eu 

% 

% 

n 2 

Same  Size 

f Same  Size  J 

Resize  all  selected  items  to  size  of 
first  selected  item. 


r 


Unlike  the  alignment  buttons  in  the  Layout  Grid  Toolbar,  the  align- 
ment options  in  the  Relative  Alignment  section  of  the  Multiselection 
Inspector  align  objects  relative  to  each  other. 

To  align  objects  relative  to  each  other,  proceed  as  follows: 

1 Select  two  or  more  objects  on  the  Layout  grid. 

2 Go  to  the  context-sensitive  Inspector  window. 

3 Use  the  buttons  in  the  Multiselection  Inspector  as  follows: 

Horizontal  Alignment  Buttons 


ZJ 


The  Align  Left  button  aligns  the  left  sides  of  two  or  more  selected  objects  on  the  layout  grid. 
Objects  are  aligned  along  the  left  side  of  the  object  furthest  left. 


The  Align  Center  button  horizontally  aligns  the  centers  of  two  or  more  selected  objects  on 
the  layout  grid.  Objects  are  aligned  along  the  vertical  center  line  between  them. 


C 

— h 


The  Align  Right  button  aligns  the  right  sides  of  two  or  more  selected  objects  on  the  layout 
grid.  Objects  are  aligned  along  the  right  side  of  the  object  furthest  right. 


Layout  Grid 


117 


Vertical  Alignment  Buttons 


The  Align  Top  button  aligns  the  tops  of  two  or  more  selected  objects  on  the  layout  grid.  Ob- 
jects are  aligned  along  the  top  of  the  highest  object. 


1 The  Align  Center  button  vertically  aligns  the  centers  of  two  or  more  selected  objects  on  the 
I g|tn  I layout  grid.  Objects  are  aligned  along  the  horizontal  center  line  between  them. 


The  Align  Bottom  button  aligns  the  bottoms  of  two  or  more  selected  objects  on  the  layout 
grid.  Objects  are  aligned  along  the  bottom  of  the  lowest  object. 


To  “clone,  or  duplicate”  the  size  of  a selected  object,  proceed  as  fol- 
lows: 

1 First  select  the  model  object  whose  size  you  want  to  clone. 

2 Leave  the  model  object  selected  and  Shift-click  additional  objects 
that  you  want  to  resize. 

3 Click  the  Same  Size  button  in  the  Multiselection  Inspector. 

4 The  objects  selected  last  will  now  be  resized  according  to  the 
width  and  height  of  the  model  object. 


Distributing  Objects  with  the  Multiselection  Inspector 

The  Multiselection  Inspector  has  a second  tab,  named  Special.  The 
buttons  and  other  options  in  the  Special  tab  let  you  distribute  three 
or  more  selected  objects  on  the  layout  grid.  Radio  buttons  give  you 
a choice  of  two  modes:  Distribute  and  Offset.  In  the  default  Distribute 
mode,  objects  are  arranged  so  that  their  edges  are  equidistant.  In 
Offset  mode,  you  can  specify  a deliberate  offset  by  which  the  objects 
should  be  moved  when  Adobe  GoLive  distributes  them  on  the  grid. 

The  screenshot  below  shows  the  Special  tab  in  Distribute  mode. 


The  Special  Tab  of  the  Multiselection 
Inspector  in  Distribute  Mode 


Click  this  option  to  distribute  objects  horizontally. 

Click  any  button  to  distribute  selected  objects 
horizontally. 


Click  this  option  to  distribute  objects  vertically. 

Click  any  button  to  distribute  selected  objects  ver- 
tically. 
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To  distribute  objects  relative  to  each  other  without  specifying  an  off- 
set, proceed  as  follows: 

1 Select  three  or  more  objects  on  the  Layout  grid. 

2 Go  to  the  Inspector  window  and  click  the  Special  tab. 

3 If  they  are  not  selected,  click  the  Distribute  radio  buttons  in  the 
Horizontal  and  Vertical  sections  of  the  Special  tab. 

4 Use  the  buttons  at  the  far  right  (the  other  buttons  are  disabled) 
in  the  Horizontal  and  Vertical  button  rows  as  follows: 


Vertical  and  Horizontal  Distribution  Buttons 

The  Equidistant  Edges  button  moves  objects  on  the  layout  grid  horizontally  so  their  edges 
are  the  same  distance  apart. 


The  Equidistant  Edges  button  moves  objects  on  the  layout  grid  vertically  so  their  edges  are 
the  same  distance  apart. 


An  example  follows: 


Icons  before  clicking  the 
Equidistant  Edges  buttons 


Icons  arranged  after  clicking  the 
Equidistant  Edges  buttons 


The  screenshot  below  shows  the  Special  tab  in  Offset  mode. 


The  Special  Tab  of  the  Multiselection 
Inspector  in  Offset  Mode 


Click  this  option  to  distribute  objects  horizontally 
by  a user-specified  distance,  then  enter  a value  in 
the  Pixel  text  box. 

Click  any  button  to  apply  horizontal  distribution 
to  selected  objects. 


Click  this  option  to  distribute  objects  vertically  by 
a user-specified  distance,  then  enter  a value  in 
the  Pixel  text  box. 

Click  any  button  to  apply  vertical  distribution  to 
selected  objects. 


Layout  Grid 
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To  distribute  objects  relative  to  each  other  using  a specified  offset  in 

pixels,  proceed  as  follows: 

1 Select  two  or  more  objects  on  the  Layout  grid. 

2 Go  to  the  Inspector  window  and  click  the  Special  tab. 

3 If  they  are  not  selected,  click  the  Offset  radio  buttons  in  the  Hor- 
izontal and  Vertical  sections  of  the  Special  tab. 

4 Use  the  Offsettext  boxes  in  the  Horizontal  and  Vertical  sections  of 
the  Special  tab  to  enter  the  spacing  you  want  between  the  select- 
ed objects  by  clicking  the  respective  button.  For  example,  if  two 
objects  on  the  layout  grid  are  20  pixels  apart  and  you  specify  an 
offset  of  30  pixels,  one  of  them  shifts  by  10  pixels. 

5 Use  the  buttons  in  the  Horizontal  and  Vertical  button  rows  as  fol- 
lows: 


Horizontal  Distribution  Buttons 


The  Relative  to  Left  Edges  button  distributes  objects  on  the  layout  grid  relative  to  their  left 
edges. 


IS) 


The  Relative  to  Vertical  Centers  button  distributes  objects  on  the  layout  grid  relative  to  their 
vertical  centers. 


The  Relative  to  Right  Edges  button  distributes  objects  on  the  layout  grid  relative  to  their  right 
edges. 


In  Offset  mode,  the  Equidistant  Edges  button  moves  objects  on  the  layout  grid  horizontally 
so  their  edges  are  equally  spaced  by  the  value  specified  in  the  Offset  text  box. 


Vertical  Distribution  Buttons 


The  Relative  to  Tops  button  distributes  objects  on  the  layout  grid  relative  to  their  tops. 


The  Relative  to  Horizontal  Centers  button  distributes  objects  on  the  layout  grid  relative  to 
their  horizontal  centers. 


The  Relative  to  Bottoms  button  distributes  objects  on  the  layout  grid  relative  to  their  bot- 
toms. 


In  Offset  mode,  the  Equidistant  Edges  button  moves  objects  on  the  layout  grid  vertically  so 
they  are  equally  spaced  by  the  distance  specified  in  the  Offset  text  box. 
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Inserting  Text  Adobe  GoLive  offers  various  ways  of  adding  text  to  your  page: 

• in  DTP-style  text  frames  placed  on  a layout  grid 

• by  typing  directly  into  the  document  window,  as  in  a word  pro- 
cessor 

• by  dragging  & dropping  text  clips  from  the  desktop  or  another 
program 


Inserting  Text  Using  Text  Frames 


To  insert  text  using  text  frames,  proceed  as  follows: 

1 Drag  the  Layout  Text  icon  from  the  Palette  and  drop  it  onto  the 
document  window  to  insert  a text  frame. 

2 Click  the  small  square  text  frame,  or  click  the  edge  of  the  text 
frame  and  resize  it  as  needed. 


The  Layout  Textbox  Inspector 

Use  Background  Color  checkbox  and  color  field  to 
assign  background  color  to  layout  text  box. 


□ : Layout  Textbox  Inspector S 

Background 
“O  Color  ll  ll 


3  Assign  a custom  color  to  a layout  text  box,  if  you  want  to. 

Drag  a color  from  the  Color  Palette:  or  Site  Colors  tab  of  the  Site 
Window  onto  the  Background  Co/or  field  of  the  Layout  Textbox  In 
spector  (see  above).  This  will  select  the  Background  Color  check- 
box automatically. 


4 


Enter  text. 


Inserting  Text 
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The  following  example  illustrates  inserting  a text  frame  and  typing 
text. 


The  Layout  Text  Icon  and 
Resulting  Text  Frame 


Click  the  text  frame  and  type  in  text. 


Click  the  edge  of  the  frame  and  drag  to  resize. 


Layout  □ ) CB  ) Source  [t]]  OH]  Q£]  ) Previev  □ ) E ) 

|>  Q AirBaja  Homepage 

<£>  S Ch 

Welcome  to  AirBaja 


Inserting  text  using  text  frames  lets  you  rearrange  your  page 
layout  easily.  Just  click  and  drag  the  item  to  the  new  location. 
As  you  type  in  text,  text  frames  and  the  underlying  layout  grid 
grow. 


Drag  & Drop  Text  Import 

Adobe  GoLive  lets  you  drag  & drop  text  clips  from  the  Finder  or  any 
other  program  that  supports  Macintosh  drag  & drop. 
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Drag  & Drop  Inserting  Text 


Drag  a text  clipping — for  example,  from  the 
Finder, ... 


...  drop  it  on  a text  frame  in  your  document  window,.. 


. . . and  watch  Adobe  GoLive  insert  the  text  and  re- 
size the  text  frame. 


To  drag  & drop  into  text  frames  or  the  document  window,  proceed 
as  follows: 

1 Select  a text  clipping  in  the  Finder  or  document  window  of  the 
source  application.  Drag  it  onto  the  text  frame  or  document 
window. 

2 Drop  the  text  clipping  to  insert  the  text.  Adobe  GoLive  automati- 
cally resizes  the  text  frame,  if  required. 


Typing  Text  Directly  in  the  Document  Window 

Alternatively,  you  can  type  text  directly  in  the  document  window. 


Layout  C3l  IB]  Source  [t]]  IMl]  Preview  fT3  \ fFf  ) 

SB 

^ [J]  Welcome  to  Adobe  GoLive  4 
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Formatting  Text  The  Text  Toolbar 

Adobe  GoLive’s  Text  Toolbar  provides  formatting  shortcuts  to  often- 
used  character  and  paragraph  styles. 


Text  Formatting  Shortcuts 
on  the  Text  Toolbar 


f BMiS <;-i 


None 

IIWiH 

Header  2 
Header  3 
Header  4 
Header  5 
Header  6 


Address 

Preformatted 


— The  New  Link/Remove  Link 
buttons  create  and  break 


likl  I 


!Z3  [y 


-1  1 1 — The  Indent/Unindent 

buttons  create  and 
undo  indentations. 
-The  List  Style  buttons  format  para- 
graphs as  bulleted  or  numbered 
lists. 

The  Relative  Font  Size  menu  permits  non-de- 
fault  font  sizes  that  override  browser  preferenc- 

“The  Text  Style  buttons  let  you  format  text  in  boldface, 
italics,  and  teletype  styles. 

“The  Alignment  buttons  control  the  horizontal  alignment  of  text  and 
objects:  left,  centered,  and  right. 


—The  Paragraph  Style  menu  lets  you  format  the  current 
selection  with  default  HTML  styles. 


The  Style  and  Format  Menus 

Adobe  GoLive’s  Style  menu  offers  a complete  selection  of  character 
styles,  structural  tags,  and  relative  font  sizing  options. 

Adobe  GoLive’s  Format  menu  provides  a complete  selection  of  para- 
graph styles,  alignment,  and  list  formatting  options. 


Text  Formatting  Commands  in  the  Style 
and  Format  Menus 


!✓  Plain  Text 

08§P  | 

Bold  r\ 

•03§B 

Italic  ^ 

0981 

Underline 

Strikeout 

Superscript 

Subscript 

088- 

Teletype 

oa§T 

Blink 

Structure 

► 

Size 

► 

Font 

► 

Nobreak 

Remove  Color 

Header  2 ' 

Header  3 

Header4 

Header  5 

Header  6 

Address 

Preformatted 

Alignment 

► 

List 

► 
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Formatting  Characters  Using  the  Style  Menu 

The  Style  menu  includes  a complete  selection  of  HTML  text  format- 
ting commands,  including  both  physical  and  structural  character 
styles. 


The  difference  between  physical  and  structural  character  styles 
is  functional  rather  than  visual.  While  physical  styles  make  in- 
dividual words  or  phrases  stand  out  from  the  surrounding  text, 
structural  character  styles  classify  items  of  information  (see  ta- 
ble below). 


The  Style  menu  and  resulting  physical  character  styles,  as  viewed  us- 
ing Netscape  Navigator  3.0,  appear  below. 


The  Style  Menu  and 
Its  Physical  Character  Styles 


✓ Plain  Text 

•038  P 

HI 

Italic  ^ 

0§€l 

Underline 

•03§U 

Strikeout 

Superscript 

038+ 

Subscript 

03§- 

Teletype 

•03ST 

Blink 

Structure 

> 

Size 

► 

Font 

► 

Nobreak 

Selecting  a character 
style  from  the  Style 
menu  formats  the 
current  selection  like 
this. 


Plain  Text 

Bold 


Underline 

tx^J^n  i~i  n t 


Superscript 

Subscript 

Teletype 


To  apply  a character  style,  select  text  and  choose  the  desired  option 
from  the  Style  menu. 


Older  browsers  may  not  support  character  styles  other  than  the 
basic  set,  such  as  plain,  boldface,  and  italic.  Note  that  Adobe 
GoLive  does  not  preview  the  Blink  style.  Launch  your  browser 
to  see  this  effect. 
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The  Style  - Structure  Submenu 
and  Resulting  Text  Styles 


The  Style  menu  has  three  submenus: 


• The  Structure  submenu  contains  structural  styles  (see  the  note 
on  page  124  on  the  difference  between  physical  and  structural 
styles).  The  Structure  submenu  and  resulting  structural  character 
styles,  as  viewed  using  Netscape  Navigator  3.0,  appear  below. 


Strikeout 

Superscript 

Subscript 

Teletype 

Blink 

038  A 
038+ 
038- 
038T 

Structure 

► 

✓ Plain  Structure  1 

Size 

► 

Emphasis 

Font 

► 

Strong  * 

Nobreak 

Sample 

Definition 

Variable 

Code 

Keyboard 

Plain  Structure 
JZaiji&txir 

Strong 

Sample 

Definition 

Code 

Keyboard 


The  following  list  is  a short  guide  to  structural  tags: 


Plain  Structure  Removes  all  existing  logical  styles. 

Emphasis  Italicizes  text. 

Strong  Displays  text  in  boldface. 

Quotation  Identifies  text  taken  from  another  source.  Most 

browsers  use  smaller  font  size  and  italics  to  dis- 
tinguish quotations. 


Sample  Indicates  text  from  another  source  used  as  a 

sample  to  demonstrate  a given  property.  Most 
browsers  use  a monospaced  font  to  distinguish 
samples. 

Definition  Identifies  text  as  a definition.  Most  browsers  use 

plain  text  to  display  definitions. 

Variable  Establishes  a variable  name  within  a block  of 

program  code.  Most  browsers  use  italics  to  dis- 
tinguish variables. 

Code  Identifies  computer  program  code.  Most  brows- 

ers use  a monospaced  font  to  distinguish  code. 


Keyboard  Denotes  text  to  be  typed.  Most  browsers  use  a 

monospaced  font  to  distinguish  keyboard  en- 
tries. 
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The  Style  - Relative  Size  Submenu 


• The  Relative  Size  submenu  lets  you  choose  custom  font  sizes  to 
override  the  browser’s  preferences.  A detailed  discussion  of  font 
size  issues  follows. 


n i 


✓ 3 (default) 
2 


Structure 


Font 


Nobreak 

Remove  Color 


For  information  on  the  Font  submenu,  see  Font  Sets  on  page  128. 


Formatting  Characters  Using  the  Text  Toolbar 


Alternatively,  you  can  apply  basic  character  styles  by  selecting  the 
text  to  be  formatted  and  clicking  the  desired  button  on  the  Toolbar: 

The  dJ  button  toggles  the  Boldface  style  on  and  off. 

The  CD  button  toggles  the  Italics  style  on  and  off. 

The  Cl]  button  toggles  the  monospaced  Teletype  style  on  and  off. 

To  apply  relative  font  sizing,  choose  the  desired  increase  or  decrease 
in  font  size  from  the  Relative  Size  menu  on  the  Toolbar. 


The  Bold,  Italics,  and  Teletype  Buttons 
on  the  Text  Toolbar 


Things  to  Know  About  Font  Sizes  Across  Platforms 

The  browser,  not  the  author,  controls  font  sizes  on  the  Web.  Some  us- 
ers will  have  their  browser  configured  to  display  text  at  9 points  and 
other  users  will  have  theirs  configured  to  display  text  as  large  as  14 
or  even  18  points.  The  relative  size  settings  you  choose  have  the  fol- 
lowing effects: 
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• HTML  size  3 means  to  display  text  at  the  size  set  in  the  browser’s 
preferences. 

• HTML  size  2 is  one  font  size  smaller  than  the  size  set  in  the 
browser’s  preferences. 

• HTML  size  4 is  one  font  size  larger  than  the  size  set  in  the 
browser’s  preferences. 

Most  users  probably  have  their  browsers  configured  to  display  text  at 
12  point  Times.  However,  fonts  on  a Windows  machine  are  about 
one  step  larger  than  on  the  Macintosh,  due  to  the  difference  in  pixel 
resolution  between  platforms.  For  instance,  Windows  uses  96  pixels 
to  a virtual  inch  (=  72  points),  so  a 12  point  font  is  16  pixels  high  on 
Windows.  Mac  OS  uses  72  pixels  to  a virtual  inch,  so  a 12  point  font 
is  12  pixels  high.  Times  Roman  12  on  a Window’s  machine  is  roughly 
the  same  size  as  Times  14  on  a Macintosh. 

Because  of  the  uncertainty  over  the  font  size  being  viewed,  you  need 
to  design  your  page  to  handle  a range  of  font  sizes.  Internet  Explorer 
on  the  Macintosh  provides  the  easiest  way  to  proof  your  pages  at  a 
variety  of  font  sizes.  It  has  a Font  larger/smaller  button  in  its  Toolbar 
that  will  let  you  easily  change  font  sizes.  (In  Navigator,  you  have  to 
change  the  default  font  size  in  the  Preferences.) 

Here  is  some  background  information  and  tips  on  designing  with  in- 
determinate font  sizes. 

• Do  not  mix  header  styles  with  relative  font  sizes.  Relative  font 
sizes  can  cause  headers  to  wrap  and  foil  your  layout. 

• Layout  grid  text  boxes  will  lengthen  as  the  text  grows  so  that  text 
won’t  be  cut  off.  Graphics  and  other  objects  below  them  will  be 
pushed  down. 

• Layout  grid  text  boxes  will  not  shrink  if  the  text  is  viewed  at  a 
smaller  size  than  the  one  you  used  to  lay  out  the  page.  This  can 
lead  to  space  between  the  text  and  graphics  below  the  text. 

• You  can  place  graphics  (or  even  small  layout  grids)  inside  a lay- 
out grid  text  box.  These  graphics  will  move  up  and  down  as  the 
text  resizes. 

• Set  Adobe  GoLive’s  default  font  size  to  9 or  10  points.  This 
reduces  the  chance  that  users  will  have  their  browsers  set  to  a 
smaller  font  size.  In  the  Preferences  - Fonts  dialog  box,  click  on 
the  default  CS-Western  (Latin  1)  encoding  to  select  it,  then 
change  the  Proportional  font  size. 
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• Sometimes  a simple  table  is  the  best  solution  to  keeping  graph- 
ics and  text  aligned  together.  Put  the  text  in  one  cell  and  the 
graphic  in  another.  At  any  displayed  font  size,  the  text  and 
graphics  will  stay  together.  You  can  use  tables  on  top  of  a layout 
grid  or  by  themselves. 

Controlling  Line  Breaks 

The  Nobreak  command  in  the  Style  menu  inserts  an  HTML  tag  that 
suppresses  line  breaks  between  any  number  of  words  you  want  to- 
gether on  the  same  line. 


Choosing  the  Nobreak  Command  from 
the  Style  Menu 


Style 


Plain  Text 

o*p 

Bold 

0*B 

Italic 

0*1 

Underline 

o*u 

Strikeout 

0*A 

Superscript 

<>*♦ 

Subscript 

0*- 

Teletype 

0*T 

Blink 

Structure 

► 

Size 

► 

Font 

► 

To  suppress  text  wrapping,  proceed  as  follows: 

1 Select  the  words  you  want  to  keep  together  on  the  same  line. 

2 Choose  the  Nobreak  command  from  the  Style  menu. 


Font  Sets  Adobe  GoLive  allows  you  to  store  font  sets  with  each  page.  Based  on 

the  FACE  attribute  of  the  FONT  tag,  a font  set  adds  a list  consisting  of 
one  or  more  font  names  to  the  currently  selected  text.  If  the  first  font 
on  the  list  is  available  on  the  visitor’s  system,  it  will  be  used  to  display 
the  text  formatted  accordingly.  If  not,  the  second  font  is  used,  and  so 
on.  If  none  of  the  fonts  on  the  list  is  available,  the  text  will  appear  in 
the  default  font  of  the  Web  browser. 

The  Font  command  from  the  Edit  menu  lists  all  font  sets  available  for 
the  current  session.  The  choice  of  font  sets  varies  with  the  availability 
of  their  source  windows:  Global  font  sets  are  displayed  by  default, 
while  font  sets  used  in  individual  pages  or  stored  in  the  Site  Window 
appear  only  when  their  parent  windows  are  open.  The  following 
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menu  shot  illustrates  the  choice  of  font  sets  that  is  available  when  a 
Web  page  and  the  Site  Window  are  open. 


Font  Sets  in  the  Style  Menu 


The  Font  command  from  the  Style  menu... 


. . .displays  a list  of  font  sets  available  in  the  current 
session. 


) 

! 


This  section  of  the  menu  lists  global  font 
sets  and  font  sets  from  currently  open 
pages. 


Font  sets  from  currently  open  site  docu- 
ments appear  below  the  separator. 


Separators  divide  the  Font  submenu  in  three  sections: 

• The  Edit  Font  Sets...  command  opens  the  Font  Set  Editor  shown 
below. 

• Listed  below  the  first  separator  are  the  global  font  sets  managed 
by  the  application  and  the  font  sets  from  open  pages. 

• Listed  below  the  second  separator  are  the  font  sets  from  open 
Site  Windows. 


130 


Building  Web  Pages 


CHAPTER  4 


The  Fontset  Editor 


Click  this  icon  to  add  new  or  edit  existing  global 
font  sets. 


Click  this  icon  to  add  new  font  sets  to  the  page  or 
edit  existing  font  sets. 


The  FontSet  Editor  dialog  box  lets  you  add  and  edit  both  global  and 
page-specific  font  sets.  (For  instructions  on  how  to  edit  site  font  sets, 
please  see  page  656.)  Before  creating  a new  font  set,  you  tell  Adobe 
GoLive  where  to  store  it  by  clicking  the  Default  or  Page  icon  in  the  left 
pane  of  the  dialog  box.  The  screenshot  below  shows  the  FontSet  Ed- 
itor dialog  box  opened  by  the  Edit  Font  Sets...  command. 


To  add  font  sets,  proceed  as  follows: 

1 Click  the  Default  icon  in  the  leftmost  pane  of  the  dialog  box  to 
add  global  font  sets,  or  click  the  Page  icon  to  add  font  sets  to  the 
page  only. 

2 Click  the  New  button  below  the  Font  Sets  list  to  add  a new  unti- 
tled font  set  to  the  list. 

3 Go  to  the  rightmost  pane  and  click  the  New  button  below  the 
Font  Names  list. 

4 Choose  a font  from  the  popup  menu  below  the  Font  Names  list, 
or  enter  the  font  name  in  the  text  box,  if  the  font  is  not  installed 
in  your  system.  The  font  name  appears  in  the  text  box.  In  the  Font 
Sets  list,  the  new  font  set  is  renamed  according  to  your  selection. 
(Font  sets  are  always  named  according  to  the  first  font  they  con- 
tain.) 

5 Repeat  steps  3 and  4 to  add  more  fonts  to  the  font  set  until  you 
are  satisfied  with  the  selection. 


To  edit  font  sets,  proceed  as  follows: 

1 Click  the  Default  icon  in  the  leftmost  pane  of  the  dialog  box  to 
edit  global  font  sets,  or  click  the  Page  icon  to  edit  page  font  sets. 

2 Click  to  select  the  desired  item  in  the  Font  Sets  list. 
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3 Depending  on  what  you  want  to  do,  continue  as  follows: 

To  change  a font  within  a font  set: 

- Go  to  the  rightmost  pane  and  click  to  select  the  font  you  want 
to  edit  in  the  Font  Names  list. 

- Choose  an  new  font  from  the  popup  menu  below  the  Font 
Names  list.  The  font  name  appears  in  the  text  box.  If  you  have 
selected  the  first  font  in  a font  set,  the  font  set  is  renamed  ac- 
cordingly in  the  Font  Sets  list. 

To  add  a new  font  within  a font  set: 

Do  not  make  a selection  if  you  want  to  add  a new  font  to  the 
selected  font  set. 

- Click  the  New  button  below  the  the  Font  Names  list,  then 
choose  a new  font  to  add  from  the  fonts  popup  menu. 

To  delete  a font  from  a font  set: 

- Goto  the  rightmost  pane  and  click  to  select  the  font  you  want 
to  delete  in  the  Font  Names  list. 

- Click  the  Delete  button  below  the  Font  Names  list. 

4 When  you  are  done  editing,  click  the  OK  button. 

Once  you  have  created  global  font  sets,  you  can  use  them  to  format 
text  in  any  Web  page  you  open  with  Adobe  GoLive.  Page  font  sets, 
however,  are  only  available  within  their  parent  pages,  that  is,  the 
pages  where  you  have  created  them  in  the  first  place. 

To  format  text  using  a font  set,  proceed  as  follows: 

1 Select  the  desired  text. 


Choosing  the  Edit  Font  Sets  Command 
from  the  Style  Menu 


Structure 

Size 


► 

► 


Nobreak 

Remove  Color 
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2 Choose  the  font  set  from  the  Font  submenu  of  the  Style  menu 
(see  above). 


The  Format  Menu 


Choosing  Paragraph  Styles  from  the  Format  Menu 

The  Format  contains  a set  of  six  HTML  paragraph  styles  for  inserting 
headers  that  will  structure  your  site. 


The  Format  menu  contains  the  same  set  of  commands  as  the 
Text  Toolbar  (see  page  133,  Choosing  Paragraph  Styles  from  the 
Text  Toolbar),  but  the  Format  menu  offers  more  choices  for  list 
formatting  (see  page  135). 


Format 


✓ None 


Fleader  2 ' 

Header  3 

Header4 

Header  5 

Header  6 

Address 

Preformatted 

Alignment 

► 

List 

► 

To  assign  a paragraph  style  from  the  Format  menu,  place  the  mouse 
cursor  in  that  paragraph  and  choose  the  desired  style  from  the 
menu: 

• Choosing  the  Fleader  7 through  Fteader  6 options  applies  one  of 
the  six  hierarchical  levels  of  headings  to  the  current  paragraph. 

• Selecting  the  Address  option  applies  the  default  HTML  style  for 
the  author’s  E-mail  address  to  the  current  paragraph. 

• Choosing  the  Preformatted  option  applies  the  default  style  that 
displays  HTML  code  to  the  current  paragraph. 

• Picking  None  resets  the  current  text  to  the  default  style  selected 
in  the  Font  Preferences  dialog  of  the  browser. 
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Choosing  Paragraph  Styles  from  the  Text  Toolbar 


Alternatively,  you  can  format  a paragraph  using  the  Paragraph  Styles 
menu  on  the  Text  Toolbar.  For  this,  place  the  mouse  cursor  in  that 
paragraph  and  choose  the  desired  style  from  the  Paragraph  Styles 
menu. 


The  Paragraph  Styles  Menu 
on  the  Text  Toolbar 


* It  | = | fBirrirri  I 3 ? | 


The  Paragraph  Styles  menu  lets  you  format  the  current 
selection  with  default  HTML  styles. 


The  Alignment  Submenu  of  the  Format 
Menu 


Aligning  Paragraphs  Using  the  Format  Menu 

The  Alignment  submenu  to  the  Format  menu  lets  you  align  text  or 
objects. 


Alignment  ► 

y Default  Alignment 
Left  G88G 

List  F 

Center  [\  03§M 

Aight  ' 0*R 

Increase  Block  Indent 

To  align  the  current  paragraph,  selected  text,  or  object,  choose  the 
Left,  Center,  or  Right  option  from  the  Alignment  submenu.  The  De- 
fault Alignment  option  specifies  that  the  paragraph  shouldn’t  have 
an  alignment  or  removes  an  existing  alignment. 


Adding  Block  Indents 


The  Increase  Block  Indent  command  lets  you  incrementally  increase 
the  space  between  a paragraph  and  the  left  and  right  margins. 

To  block  indent  the  current  paragraph  or  selected  text,  choose  the  In- 
crease Block  Indent  command  from  the  Alignment  submenu. 

To  reduce  or  remove  block  indent  from  the  current  paragraph  or  se- 
lected text,  choose  the  Decrease  Block  Indent  command. 
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The  following  screenshots  show  how  the  Increase  Block  Indent  com- 
mand acts  on  a paragraph  in  a text  frame.  It  adds  extra  space  on 
both  sides  and  enlarges  the  text  box  to  accommodate  the  indenta- 
tions and  indented  text. 


Aligning  Paragraphs  Using  the  Text  Toolbar 


Alternatively,  you  can  align  a paragraph  or  object  by  placing  the  cur- 
sor in  that  paragraph  or  on  the  same  line  as  the  object  and  clicking 
the  desired  button  on  the  Text  Toolbar. 


The  Left  Align,  Center,  and  Right  Align 
Buttons  on  the  Text  Toolbar 


□ 


| Header  1 


DtHHI]  mmmi 3 ?i  irriirnir^i 


The  Alignment  buttons  control  the  alignment  of 
text  and  objects:  left,  centered,  and  right. 


The  buttons  have  the  following  functions: 

• The  Left  Align  button  [SJ  aligns  the  text  or  object  on  the  left 
margin. 

• The  Center  button  2]  centers  the  text  or  object. 

• The  Right  Align  button  [5]  aligns  the  text  or  object  on  the  right 
margin. 


Specifying  an  alignment  is  optional.  If  you  don’t  align  a para- 
graph or  click  an  alignment  button  to  remove  the  alignment, 
the  browser  will  use  its  own  default  alignment  (which  is  left- 
aligned  in  most  cases). 
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The  Format  Menu:  List  Submenu  and 
Resulting  List  Styles 


Formatting  Lists  Using  the  Format  Menu 

The  List  submenu  to  the  Format  menu  lets  you  format  paragraphs  as 
numbered  or  unnumbered  lists,  create  Terms  & Definitions-style 
lists,  and  select  various  other  list  formats. 

The  different  list  styles,  as  viewed  using  Netscape  Navigator  3.0,  ap- 
pear below. 


Default  Numbered  List  38# 
l.  Rrabic 
I.  Upper  Roman 
i.  Lower  Roman 
A.  Upper  Rlpha 
a.  Lower  Alpha 


Default  Unnumbered  List 

38U  | 

O Bullet 

o Circle  ^ 

□ Square 

Term 

Definition 

Increase  List  Leuel 

38+ 

Choosinga  list  style 
from  the  Format 
menu  formats  the 
current  paragraph 
like  this. 


1.  Default  Numbered 

2.  Arabic 

III.  Uppercase  Roman 
iv.  Lowercase  Roman 
E.  Uppercase  Alpha 
f.  Lowercase  Alpha 

• Bullet 
o Circle 
□ Square 

Term 

Definition 


Numbered  List 


Numbered  and  Unnumbered  Lists 


In  addition  to  the  basic  list  formatting  options  that  the  Text  Toolbar 
offers  (see  page  136),  you  can  create  custom  numbered  and  unnum- 
bered lists  by  selecting  the  appropriate  list  style  from  the  List  sub- 
menu. 

The  following  example  shows  a numbered  list  formatted  with  the 
Upper  Roman  option. 


Welcome  to  Frequent  Flyer 

Our  topics  this  week : 

I . Traveling  Unlimited 

II.  Traveler's  Heaven 

III.  Bonus  Programs 

IV.  Best  Deals 

V.  Holiday  Specials 


To  apply  a custom  list  style  to  the  current  paragraph  or  selection, 
choose  the  appropriate  option  from  the  List  submenu. 
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Hierarchical  Lists 

You  can  also  create  hierarchical  or  nested  lists  with  multiple  num- 
bering schemes  or  different  leading  characters. 

The  following  example  shows  an  unnumbered  hierarchical  list. 


Hierarchical  List 


In  hierarchical  lists,  Adobe  GoLive automatically 
assigns  a different  leading  character  to  lower- 
level  items. 


Welcome  to  Frequent  Flyer 

Our  topics  this  week: 

■ Traveling  Unlimited 

° Traveler's  Heaven 
° Bonus  Programs 
° Best  Deals 
• Holiday  Specials 


To  nest  individual  list  items  that  you  want  lower  in  rank,  proceed  as 
follows: 

1 Select  the  list  item. 

2 Go  to  the  List  submenu  and  choose  a different  style. 

3 Go  to  the  Format  menu  and  choose  List.  Then  choose  Increase  List 
Level. 

Choosing  the  Decrease  List  Level  command  for  a first-level  list  item 
removes  the  list  style  and  resets  the  paragraph  to  plain  style. 

Choosing  the  Decrease  List  Level  command  for  a second-level  or 
lower  list  item  shifts  the  list  item  to  the  left,  taking  it  to  the  next 
higher  hierarchy  level. 


Formatting  Lists  Using  the  Text  Toolbar 


You  can  also  format  the  current  paragraph  or  selection  as  a list  or  list 
item  by  clicking  the  desired  button  on  the  Text  Toolbar. 

To  create  a numbered  list,  proceed  as  follows: 

1 Click  at  the  numbered  list  button  ED. 

2 Click  the  Increase  List  Level  button  to  indent  the  paragraph  fur- 
ther, creating  a nested  or  multilevel  list. 

To  create  an  unnumbered  list,  proceed  as  follows: 

1 Click  at  the  unnumbered  list  button  El). 

2 Click  the  Increase  List  Level  button  to  indent  the  paragraph  fur- 
ther, creating  a nested  or  multilevel  list. 


Tables 


137 


The  Right  Indent  button  |<S]  resets  a list  item  to  plain  style  if  the  para- 
graph is  a first-level  list  item. 

Clicking  the  Right  Indent  button  for  second-level  or  lower-level  list 
items  shifts  the  paragraph  back  toward  the  left  margin  and  changes 
the  leading  list  character  accordingly — for  example,  from  a second- 
level  hollow  bullet  to  a first-level  solid  bullet. 


The  List  Style  Buttons  on  the  Text  Toolbar 


■to- 1 i\  fTT^TTI  |T](T][f]  \z  t\  Fi|(7i1ff>l 


The  List  Style  buttons 
format  paragraphs  as 
bulleted  or  numbered 
list  items. 


Tables 


Editing  a Table 


Adobe  GoLive  supports  multicolumn,  multirow  tables  that  help  you 
present  information  in  spreadsheet  form  using,  for  example,  data  ex- 
ported by  spreadsheet  applications. 

Tables  are  inserted  via  drag  & drop  or  by  double-clicking  the  table 
icon  in  the  Palette.  After  inserting  a new  table,  you  can  change  its  ap- 
pearance, resize  the  entire  table  or  individual  rows  and  columns, 
add  color,  select  the  alignment  of  objects  within  cells,  and  import 
tab-separated  text  files. 

The  following  screenshot  shows  a table  designed  with  Adobe  GoLive. 
This  example  has  a leading  caption,  three  columns,  and  five  rows. 


□ ? =Tables 0 El 

Layout  [~l  ) |~H~j~  Source  rr~n  nn]  preview  n|  fR  | I 

2)  My  home  page  <©  □ Cs  I 

Frequent  Fliers 

Best  Deals  for  Bonus  Miles 


Description 

Miles  Required 

Bonus  Miles 

Frequent  Traveller  Plus  Program 

300,000 

350,000 

Master  Flyer  Program 

250,000 

25,000 

Super  Traveller  Program 

250,000 

20,000 

V.I.P.  Bonus  Schedule 

250,000 

20,000 

Frequent  Traveller  Gold  Program 

200,000 

10,000 
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Tables  can  accommodate  almost  any  element  of  information, 
from  text  and  images  to  QuickTime  movies.  Positioning  objects 
with  tables  is,  however,  a very  tedious  process  that  you  can  ac- 
complish more  easily  by  using  Adobe  GoLive’s  unique  layout 
grid  feature  (see  page  111  for  details). 


Inserting  a Table 


Inserting  a Table 


To  insert  a table,  proceed  as  follows: 

1 Drag  the  Table  icon  from  the  Palette. 

2 Drop  it  on  your  layout  grid  and  position  it  as  desired,  or  drop  it 
on  your  document  window  if  you’re  not  using  a layout  grid. 


Resizing  a Table 


After  inserting  a new  table,  you  can  resize  individual  cells,  rows,  col- 
umns, or  the  entire  table  interactively  to  meet  your  needs. 

To  interactively  resize  a cell,  row,  column,  or  entire  table,  proceed  as 
follows: 

1 Option-click  the  right  border  of  the  cell,  column,  or  table  to 
change  the  width;  option-click  the  bottom  of  the  cell,  column,  or 
table  to  change  its  height. 

Option-clicki ng  resets  the  measurement  of  the  table  from  Auto  to 
Pixels  (see  Customizing  a Table  with  the  Table  Inspector  on  the 
next  page). 
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2 Watch  the  default  arrow  cursor  turn  into  the  Resize  cursor. 

Super  Traveller  program 
V.I.P.  Bonus  Schedule 

Frequent  Traveller  Gold  Program  ^jf>— Resize  Cursor 


The  Resize  cursor  is  light  blue  when  it  acts  on  a cell,  row,  or  col- 
umn and  dark  blue  when  it  acts  on  the  entire  table. 

3 Drag  in  the  desired  direction  to  resize. 


Exactly  what  happens  depends  on  the  settings  for  Pixel,  Per- 
cent, or  Automatic  in  both  the  table  as  a whole  and  each  indi- 
vidual cell.  To  obtain  more  predictable  results,  set  the  width  or 
height  of  each  cell  numerically  using  the  Width  and  Height  text 
boxes  in  the  respective  tabs  of  the  Table  Inspector. 


Making  Selections  The  following  section  outlines  how  to  make  selections  in  a table.  Se- 

Within  a Table  lecting  parts  of  the  table  is  essential  to  editing  the  table  in  the  Table 

Inspector.  Also,  Adobe  GoLive  lets  you  select  multiple  cells  in  a table 
and  apply  colors,  font  sets,  and  relative  font  sizes,  even  if  the  cells 
within  the  selection  are  not  adjacent. 

When  you  have  selected  cells  in  a table  or  the  table  as  a whole,  you 
can  apply  the  table  editing  commands  from  the  Table,  Row,  and  Cell 
tabs  of  the  Table  Inspector,  as  described  in  the  following  pages,  or  ap- 
ply formatting. 
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Selecting  Contiguous  Cells 


To  select  contiguous  cells,  proceed  as  follows: 

• To  select  the  entire  table,  click  on  either  its  top  or  left  edge. 

• To  choose  a cell,  click  on  the  bottom  or  right  edge  of  the  cell. 

• To  select  multiple  cells,  Shift-click  the  bottom  or  right  edges  of 
adjacent  table  cells  successively. 

• To  select  all  table  cells,  click  on  the  bottom  or  right  edge  of  any 
cell,  then  choose  the  Select  All  command  from  the  Edit  menu  or 
press  Command-A. 


Please  note  that  Adobe  GoLive  will  disable  some  options  in  the 
Table  Inspector,  depending  on  your  selection.  For  example,  if 
you  select  the  two  adjacent  cells,  the  Column  Span  option  will 
be  disabled  in  the  Cell  tab  because  column  spanning  doesn’t 
require  making  a selection. 


Selecting  Contiguous  Cells 


Unlike  table  editors  in  word  processors  the  cells  you  select  in  Adobe 
GoLive  do  not  have  to  form  a contiguous  block.  The  example  below 
illustrates  this  multiple  cell  selection  capability. 


Selecting  Multiple  Cells  in  a Table 

The  cel  Is  with  bold  typeface  were  formatted  using 
only  a single  command. 


By  Shift-clicking  cells,  you  can  make  complex 
selections  in  a table. 


Description 

Miles 

Required 

Bonus  Miles 

Frequent  Traveler  Plus  Program 

300.000 

35.000 

Master  Flyer  Program 

150.000 

25.000 

S uper  Traveler  Program 

150.000 

20.000 

VIP  Bonus  Schedule 

250.000 

20.000 

Frequent  Traveler  Gold  Program 

100.000 

10.000 

To  select  non-contiguous  cells,  proceed  as  follows: 

• Shift-clicking  a cell  adds  it  to  the  current  selection. 

• Shift-clicking  a cell  that  is  already  selected  cancels  the  selection. 

• Shift-clicking  the  top  of  a column  selects  the  entire  column  as 
long  as  there  are  no  cells  selected  in  that  column. 

• Shift-clicking  the  top  of  a column  inverts  the  selection  when 
cells  are  already  selected  in  that  column.  This  action  deselects 
previously  active  cells  and  selects  previously  inactive  cells.  An 
example  appears  below. 
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Inverting  a Selection  in  a Table 


Customizing  a Table  with 
the  Table  Inspector 


JL 


Description 

MU' 

Req 

Frequent  Traveler  Plus  Program 

300,000 

Master  Flyer  Program 

250, 00r 

Super  Traveler  Program 

250, Du 

VIP  Bonus  Schedule 

250,000 

Frequent  Traveler  Gold  Program 

200, 

When  a selection  exists  in  a column .. . 


* 


Description 

MiJ< 

Req 

Frequent  Traveler  Plus  Program 

300.000 

Master  Flyer  Program 

250,00p 

Super  Traveler  Program 

250 ,0u 

VIP  Bonus  Schedule 

250,000 

Frequent  Traveler  Gold  Program 

200, 

. . . shift-clicking  the  top  of  the  column  inverts 
that  selection.  Deselecting  the  previously  active 
cells  and  selecting  the  previously  inactive  cells. 


• Shift-clicking  the  left  side  of  a row  selects  the  entire  row.  As  is 
the  case  with  cells  and  columns,  rows  need  not  be  adjacent  to 
be  selectable. 

• Shift-clicking  the  left  side  of  a row  inverts  the  selection  when 
cells  are  already  selected  in  that  row.  As  is  the  case  with  col- 
umns, this  action  deselects  previously  active  cells  and  selects 
previously  inactive  cells. 

The  context-sensitive  Inspector  window,  now  titled  Table  Inspector, 
will  allow  you  to  configure  your  table  before  you  start  typing  in  text 
or  inserting  objects.  The  Table  Inspector  has  three  tabs:  Table,  Row, 
and  Cell. 


142 


Building  Web  Pages 


CHAPTER  4 


The  Table  Tab 

The  Table  tab  controls  the  general  appearance  of  the  table,  allowing 
you  to  color  it,  add  or  delete  rows  and  columns,  control  the  behavior 
of  text  in  cells,  enter  exact  measurements,  insert  a caption,  and  im- 
port data  from  a spreadsheet  or  database  application. 


2 Go  to  the  Inspector,  place  the  cursor  in  the  Rows  text  box,  enter 
the  desired  number  of  rows,  and  press  the  Return  key  to  confirm 
your  entry. 

3 Place  the  cursor  in  the  Colum ns  text  box,  enter  the  number  of  col- 
umns you  want,  and  press  the  Return  key  to  verify  your  entry. 


To  set  the  dimensions  of  the  table,  proceed  as  follows: 

1 Click  the  top  border  or  right  border  of  the  table  to  select  it. 

2 Go  to  the  Inspector,  place  the  cursor  in  the  Width  text  box,  enter 
the  desired  overall  width,  and  press  the  Return  key  to  confirm 
your  entry. 

You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Width  text  box: 


Pixel,  the  default  option,  lets  you  enter  the  width  precisely  in 
pixels. 

The  Percent  option  lets  you  enter  the  size  relative  to  the  width 
of  the  underlying  layout  grid  or  the  screen. 

The  Auto  option  sets  the  width  automatically. 
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3  Place  the  cursor  in  the  Height  text  box,  enter  the  desired  overall 
height,  and  press  the  Return  key  to  confirm  your  entry. 

You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Height  text  box: 

- Pixel,  the  default  option,  lets  you  enter  the  height  precisely  in 
pixels. 

- The  Percent  option  lets  you  enter  the  height  relative  to  the 
height  of  the  underlying  layout  grid  or  the  screen. 

- The  Auto  option  sets  the  height  automatically. 

To  set  the  appearance  of  the  table,  proceed  as  follows: 

1 Select  the  table. 

2 Click  the  Table  Inspector. 

3 Place  the  cursor  in  the  Border  text  box,  enter  the  desired  border 
width,  and  press  the  Return  key  to  confirm  your  entry. 

Setting  Border  to  “0”  hides  the  table  borders.  In  Adobe  GoLive’s 
screen  display,  the  borders  will  appear  grayed  out  to  indicate 
that  a table  is  present.  You  can  hide  the  thin  gray  table  separa- 
tors by  choosing  the  Hide  Invisible  Items  command  from  the  Edit 
menu. 

4 Place  the  cursor  in  the  Cell  Pad  text  box,  enter  the  desired  vertical 
spacing,  and  press  the  Return  key  to  confirm  your  entry. 

5 Place  the  cursor  in  the  Cell  Space  text  box,  enter  the  desired  inter- 
cell spacing,  and  press  the  Return  key  to  confirm  your  entry. 

6 Click  the  color  field,  drag  a color  from  the  Color  Palette  window, 
and  drop  it  on  the  color  field,  checking  the  checkbox  automati- 
cally. 

7 Select  an  option  from  the  popup  Alignment  menu  to  align  the  table 
with  respect  to  the  document  window  (inactive  with  layout  grid). 

- The  Default  option  lets  Adobe  GoLive  align  the  table  auto- 
matically, based  on  the  alignment  of  the  surrounding  text. 

- The  Left  option  aligns  the  table  to  the  left  margin. 

- The  Right  option  aligns  the  table  to  the  right  margin. 

8 Check  the  Caption  checkbox  to  enable  a caption  and  select  its  lo- 
cation above  or  below  the  table. 

To  convert  a table  into  a layout  grid,  click  the  Convert  button.  Tables 
preserve  color  attributes  and  alignment  when  being  converted  to 
layout  grids. 
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Importing  Data 


Adobe  GoLive  lets  you  import  data  from  spreadsheet  or  database  ap- 
plications with  ease,  allowing  you  to  add  content  to  a table  without 
typing  or  copying  and  pasting  data  from  other  programs.  The  Import 
Tab-Text  feature  on  the  Table  tab  of  the  Table  Inspector  accepts  any 
text-only  file  containing  tab-separated  data  in  a “single  line  per 
record”  format;  almost  any  spreadsheet  or  database  application  can 
output  this  format. 

To  import  spreadsheet  data,  proceed  as  follows: 

1 Make  sure  you  have  a text  file  with  the  required  tab-separated 
data  in  place. 

2 Insert  a table  into  your  page. 

3 Click  the  top  border  or  right  border  of  the  table  to  select  it. 

4 Go  to  the  Table  Inspector  and  click  the  Browse  button  next  to  the 
Import  Tab-Text  feature. 

5 Select  the  text  file  and  specify  a column  separator  for  the  file  to 
be  imported  (options  include  tabs,  commas,  semicolons,  and 
spaces)  in  the  subsequent  file  selection  dialog.  Then  click  OK. 

6 Adobe  GoLive  will  start  importing  and  add  as  many  columns  and 
rows  to  the  table  as  are  necessary  to  accommodate  the  data. 

7 Resize  the  columns  as  needed  and  add  optional  formatting. 
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The  Row  Tab 

The  Row  tab  of  the  Table  Inspector  lets  you  edit  the  attributes  of  the 
current  row,  allowing  you  to  control  the  alignment  of  text  in  cells,  as- 
sign a custom  row  color,  and  enter  exact  measurements. 


The  Row  Tab  of  the  Table  Inspector 


Use  these  options  to  control  the  alignment  of 
text  in  the  current  row. 


Click  the  color  field  to  select  a custom  row  color. 


Use  these  options  to  adjust  a custom  row 
height. 


\U Table  Inspector 

Table  | Row  'l  Cell  1 Hidd 


Vertical  Alignment 


Default 


Horizontal  Alignment  | Default 
Q Color 


13 


D 


Height 


D 


To  set  row  attributes,  proceed  as  follows: 

1 To  select  a row,  click  the  bottom  or  right  margin  of  a cell. 

2 To  customize  the  vertical  alignment  for  all  cells  in  the  row,  select 
an  option  from  the  Vertical  Alignment  popup  menu: 

- The  Default  option  centers  the  text  in  all  cells  or  defaults  to 
the  browser’s  preferences. 

- The  Middle  option  centers  the  text  in  all  cells. 

- The  Top  option  aligns  the  text  to  the  top. 

- The  Bottom  option  aligns  the  text  to  the  bottom. 

3 To  customize  the  horizontal  alignment  for  all  cells  in  the  row,  se- 
lect an  option  from  the  Horizontal  Alignment  popup  menu: 

- The  Default  option  aligns  the  text  in  all  cells  to  the  left  cell 
margin  or  defaults  to  the  browser’s  preferences. 

- The  Left  option  aligns  the  text  to  left  cell  margin. 

- The  Center  option  centers  the  text  in  all  cells. 

- The  Right  option  aligns  the  text  to  the  right  cell  margin. 
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4 Click  the  color  field,  drag  a color  from  the  Color  Palette  window, 
and  drop  it  on  the  color  field,  checking  the  checkbox  automati- 
cally. 

5 Place  the  cursor  in  the  Height  text  box,  enter  the  desired  custom 
height  for  the  current  row,  and  press  the  Return  key  to  confirm 
your  entry. 

You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Height  text  box: 

- The  Auto  option  sets  the  height  automatically  by  dividing  the 
overall  height  of  the  table  through  the  number  of  rows. 

- The  Pixel  option  lets  you  enter  the  height  precisely  in  pixels. 

- The  Percent  option  lets  you  enter  the  height  relative  to  the 
overall  height  of  the  table. 

The  Cell  Tab 

The  Cell  tab  of  the  Table  Inspector  lets  you  edit  the  attributes  of  the 
current  cell,  allowingyou  to  control  the  alignment  of  text  in  cells,  as- 
sign a custom  row  color,  and  enter  exact  measurements. 


The  Cell  Tab  of  the  Table  Inspector 

Control  the  alignment  of  text  in  the  current  cell. 
Extend  cells  horizontally  or  vertically. 

Adjust  a custom  column  width  and  row  height. 

Format  the  current  cell  as  a subheader. 

Suppress  automatic  text  wrapping. 

Add  a row  or  column  to  your  table. 

Delete  a row  or  column  from  your  table. 


< 


J 


J 


Select  a custom  cell  color. 


To  set  cell  attributes,  proceed  as  follows: 

1 Select  a cell  by  clicking  its  bottom  or  right  margin.  A marquee  ap- 
pears in  the  cell,  indicating  its  selection. 


Tables 


147 


2 To  customize  the  vertical  alignment  for  the  current  cell,  select  an 
option  from  the  Vertical  Alignment  popup  menu: 

- The  Default  option  defaults  to  the  browser’s  preferences. 

- The  Middle  option  centers  the  text  in  the  cell. 

- The  Top  option  aligns  the  text  to  the  top  of  the  cell. 

- The  Bottom  option  aligns  the  text  to  the  bottom  of  the  cell. 

3 To  customize  the  horizontal  alignment  for  the  current  cell,  select 
an  option  from  the  Horizontal  Alignment  popup  menu: 

- The  Default  option  defaults  to  the  browser’s  preferences. 

- The  Left  Default  option  aligns  the  text  to  the  left  cell  margin. 

- The  Center  option  centers  the  text  in  the  cell. 

- The  Right  option  aligns  the  text  to  the  right  cell  margin. 

4 Click  the  color  field,  drag  a color  from  the  Color  Palette  window, 
and  drop  it  on  the  color  field,  checking  the  checkbox  automati- 
cally. 

5 If  you  want  to  extend  the  a cell  over  the  rows  below  it  (see  the 
following  example),  click  on  the  cell  that  will  be  at  the  top  of  the 
span,  place  the  cursor  in  the  Row  Span  text  box,  enter  the  desired 
number  of  cells,  and  press  the  Return  key. 


A Cell  Spanning  Three  Rows 


1 Description 

Miles  Required 

Bonus  Miles 

Frequent  Traveller  Plus  Program 

300,000 

350,000 

Master  Flyer  Program 

250,000 

25,000 

Super  Traveller  Program 

20,000 

V.I.P.  Bonus  Schedule 

20,000 

Frequent  Traveller  Gold  Program 

200,000 

10,000 

6  To  extend  a cell  over  the  columns  to  its  right,  click  on  the  cell  that 
wil  I be  to  the  left  of  the  span,  place  the  cursor  in  the  Column  Span 
text  box,  enter  the  number  of  columns  to  be  spanned,  and  press 
the  Return  key. 


7  Instead  of  dragging  to  resize,  select  Pixel  or  Percent  from  the 
Width  popup  menu  (see  below),  then  place  the  cursor  in  the 
Width  text  box,  enter  the  desired  column  width,  and  press  the  Re- 
turn key  to  confirm  your  entry. 

You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Width  text  box: 

- The  Pixel  option  lets  you  enter  the  width  precisely  in  pixels. 
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- The  Percent  option  allows  you  to  enter  the  size  relative  to  the 
overall  width  of  the  table. 

- TheAufo  option  sets  the  width  automatically. 

8 Select  Pixel  or  Percent  from  the  Width  popup  menu,  then  place 
the  cursor  in  the  Height  text  box,  enter  the  desired  custom  height 
for  the  current  row,  and  press  the  Return  key  to  confirm  your  en- 
try. 

You  can  choose  a measurement  option  from  the  popup  menu 
next  to  the  Height  text  box: 

- The  Auto  option  sets  the  height  automatically  by  dividing  the 
overall  height  of  the  table  by  the  number  of  rows. 

- The  Pixel  option  allows  you  to  enter  the  height  precisely  in 
pixels. 

- The  Percent  option  lets  you  enter  the  height  relative  to  the 
overall  height  of  the  table. 


Adding  Rows  and  Columns 

If  you  need  an  extra  row  or  column — for  example,  to  avoid  overwrit- 
ing text  in  cells  to  be  spanned — proceed  as  follows: 

1 Click  the  Add  Row  button  to  add  an  empty  row  above  the  current 
selection,  or  select  the  entire  table,  then  click  the  Add  Row  but- 
ton to  add  a new  row  at  the  bottom  of  the  table. 


The  Delete  Row  button  lets  you  remove  excess  rows. 
Use  this  button  with  care!  It  deletes  the  current  row! 


The  Add  Row  and  Delete  Row  Buttons 


2 Click  the  Add  Column  button  to  add  an  empty  column  to  the  left 
of  the  current  selection,  or  select  the  entire  table,  then  click  the 
Add  Column  button  to  add  a new  column  to  the  far  right  of  the 
table. 


The  Delete  Column  button  lets  you  remove  excess  columns. 
Be  careful!  This  button  deletes  the  current  column! 


The  Add  Column  and 
Delete  Column  Buttons 
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Adding  and 
Manipulating  Text 


You  can  add  text  by  typing  or  drag  & drop. 

To  type  text  into  a cell,  proceed  as  follows: 

1 Click  in  the  center  of  the  desired  cell.  A blinking  text  cursor  ap- 
pears, indicating  that  the  cell  is  ready  to  accept  your  input. 

2 You  can  now  start  typing. 

To  move  text  between  cells,  proceed  as  follows: 

1 Double-click  to  select  the  desired  cell  text. 

2 Click  and  hold,  then  drag  the  text  and  drop  it  on  the  destination 
cell. 


Selecting  in 
Nested  Tables 


Adobe  GoLive  lets  you  nest  tables  by  placing  other  tables  in  cells.  The 
deeperyou  nest  tables,  especially  if  the  border,  cell  padding,  and  cell 
spacing  attributes  are  set  to  zero,  the  harder  it  is  to  select  a table 
within  a table.  To  make  it  easier  for  you  to  see  how  tables  are  nested, 
Adobe  GoLive  offers  a special  shortcut  for  selecting. 

To  select  nested  tables,  proceed  as  follows: 

1 Click  a cell  within  or  the  top  of  the  innermost  table. 

2 Press  Control-Return  to  view  the  outline  of  the  innermost  table. 

3 Press  Control-Return  again  to  see  the  outline  of  the  cell  that  en- 
closes the  innermost  table. 

4 Press  Control-Return  again  to  view  the  outline  of  the  parenttable 
and  continue  pressing  Control-Return  until  you’ve  reached  the 
outermost  table. 


Images  Adobe  GoLive  supports  images  and  client-side  clickable  image  maps, 

allowingyou  to  create  well-designed,  image-rich  pages  with  enticing 
graphic  hot  spots  to  click  on. 

The  following  screenshot  shows  a page  based  on  a layout  grid  with  a 
company  logo  placed  on  top. 


150 


Building  Web  Pages 


CHAPTER  4 


Placing  the  Logotype  as  an  Image 


Use  images  as  an  eye-catcher  for  a compelling 
page  design. 


Things  to  Know  About  Image  Formats 

The  standard  image  formats  for  the  Web  are  GIF  and  JPEG.  Line  art 
typically  uses  GIFs.  Photographs  and  other  images  with  more  than 
256  colors  generally  use  JPEGs.  PICTs  and  TIFFs  won’t  work  on  the 
Web.  All  graphics  need  to  be  at  a resolution  of  72  dots  per  inch.  Save 
JPEGs  as  RGB  (CMYK  or  grayscale  won’t  work). 

Designed  to  replace  the  older  and  simpler  GIFformat,  PNG  (Portable 
Network  Graphics)  has  three  major  advantages  over  GIF:  variable 
transparency  through  alpha  channels,  cross-platform  control  of  im- 
age brightness  through  gamma  correction,  and  two-dimensional  in- 
terlacing. PNG  also  compresses  better  than  GIF  in  almost  every  case, 
but  the  difference  is  generally  only  around  10%  to  30%.  One  GIF  fea- 
ture that  PNG  does  not  try  to  reproduce  is  animation;  PNG  is  in- 
tended to  be  a single-image  format  only. 

For  more  detailed  information  on  PNG,  please  visit  Greg  Roelofs’s 
Web  site  at  http://www.cdrom.com/pub/png/. 
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Adobe  GoLive  supports  GIF,  GIF89a  for  transparent  images,  JPEG,  Pro- 
gressive JPEG,  and  PNG.  Additionally,  it  automatically  converts  Mac- 
intosh PICT  and  TIFF  files  imported  from  the  Finder  via  drag  & drop. 
You  can  use  this  feature  for  previewing  an  image.  The  converted  im- 
age file  appears  in  the  Import  Images  folder  in  the  Adobe  GoLive  pro- 
gram folder  (see  Image  Preferences  on  page  160). 

About  Gamma 

Graphics  viewed  on  a Windows  machine  look  darker  than  the  same 
graphic  viewed  on  a Macintosh.  This  is  due  to  a difference  in  gamma 
settings;  the  difference  is  worse  with  older  Windows  machines.  There 
are  several  ways  to  simulate  the  Window’s  settings  on  a Macintosh. 

• Go  to  your  Monitors  control  panel  and  set  the  gamma  to  “Uncor- 
rected”. 

• Download  the  GammaToggle  FKEY.  (Shareware  by  Roland 
Gustafsson  at:  http://www.acts.org/roland/thanks/) 

• Use  Knoll  Software’s  Gamma,  which  is  supplied  with  Adobe  Pho- 
toshop. 


Inserting  an  Image 


Image  insertion  is  a drag  & drop  process,  assisted  by  a context-spe- 
cific Inspector  that  lets  you  link  the  image  to  a graphic  file  and  edit 
image  attributes. 

To  insert  an  image  placeholder,  proceed  as  follows: 

1 Open  the  Palette  and  drag  & drop  the  Image  icon  on  your  layout 
grid  or  document  window  to  insert  an  image  placeholder. 


Inserting  an  Image  Placeholder 
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Setting  Up  an  Image 


To  link  the  image  placeholder  with  an  image,  proceed  as  follows: 

1 In  the  document  window,  click  to  select  the  placeholder.  This 
opens  the  Image  Inspector  in  the  Inspector  window. 

2 Click  the  Browse  button  in  the  Image  Inspector  window. 

3 Locate  the  desired  graphic  file  in  the  subsequent  file  selection  di- 
alog and  click  OK. 

4 In  the  document  window,  the  placeholder  image  should  change 
to  the  desired  image  now. 

5 If  you  are  working  with  a layout  grid,  you  can  drag  the  image  to 
position  it  precisely. 

For  alternative  ways  of  linking  and  importing  images,  see  page  158. 


After  linking  the  image  placeholder  with  an  image  file  and  placing  it 
at  the  desired  location,  you  can  proceed  to  adjust  the  image’s  at- 
tributes. 

You  can  set  up  an  image  using  the  options  on  the  Basic  and  Special 
tabs  of  the  Image  Inspector.  (The  Map  tab  contains  options  for  image 
maps;  for  details,  see  page  162.) 


The  Basic  Tab  of  the  Image  Inspector 

Click  Special  to  view  more  options. 

Type  in  the  Universal  Resource  Locator  here... 

. . . click  Browse  to  select  an  image  file  or  click 
to  Point  & Shoot. 

Select  this  checkbox  and  type  in  the  directory 
path  and  file  nameof  the  low-resolution  image  in 
the  Low  text  field. 

Alternatively,  click  the  Generate  button  to  have 
Adobe  GoLive  itself  generate  a low-resolution  im- 
age. 

Use  these  options  to  resize  the  image. 


Select  an  option  to  align  the  image. 


□ Image  Inspector  1= 

Basic  | Spec.  ) Map  Link  ) Actions  ] 

{ 

-Source  | image  /bottom2a.  jpg 

|®J  L|J  Absolute  [ Browse...  j 

-R  Low  | image  /bottom2LS.  gif 

I®)  Hp  Absolute  [ Browse...  j 

^Generate  j []  Auto  Update 

Vidth  1 88  ||  Pixel  t ) 

Height  1 131  | f Pixel  i 1 

~ Alignment  | Top  ▼ j 

n 

These  checkboxes  convert 
the  paths  to  the  image  files 
to  absolute  paths.  This 
option  is  discussed  in  the 
section  Setting  Up  Adobe 
GoLive  to  Use  Absolute  Paths 
on  page  719  in  Chapter  17, 
Managing  Web  Sites  with 
Adobe  GoLive. 
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Low-Resolution  Images 


Adobe  GoLive  supports  low-resolution  “placeholder”  images  that  dis- 
play while  the  main  image  is  still  loading.  You  can  obtain  low-quality 
images  from  an  external  source  or  Adobe  GoLive  can  generate  them. 

To  select  a low-resolution  placeholder  image,  proceed  as  follows: 

1 Select  the  “high-quality”  image  in  the  main  document  window  to 
open  the  Image  Inspector. 

2 In  the  Basic  tab,  place  the  cursor  in  the  Low  text  field  and  type  in 
the  directory  path  and  file  name  of  the  low-quality  image. 

Alternatively,  click  the  Browse  button  and  locate  the  low-quality  im- 
age in  the  subsequent  open  file  dialog  box,  or  Shift-Command-click 
the  Point  & Shoot  button  and  drag  at  an  image  in  the  Site  Window. 

To  have  Adobe  GoLive  create  a low-resolution  placeholder  image, 
proceed  as  follows: 

1 In  the  Basic  tab  of  the  Image  Inspector,  click  the  Generate  button. 
Here’s  an  example  of  a normal  and  a high-resolution  image: 


Normal  image 


Low-resolution  image 


2 Click  Auto  Update  to  let  Adobe  GoLive  update  the  low-resolution 
image  whenever  you  alter  the  original  high-resolution  image. 


Adjusting  Image  Size 


To  adjust  image  size,  proceed  as  follows: 

1 Place  the  cursor  in  the  Height  or  Width  text  box,  enter  the  desired 
overall  height  or  width,  and  press  the  Return  key  to  confirm  your 
entry. 

2 You  can  select  a measurement  option  from  the  popup  menus 
next  to  the  Height  or  Width  text  box: 

- The  Pixel  option  lets  you  enter  the  width  precisely  in  pixels. 

- The  Percent  option  allows  you  to  enter  the  size  relative  to  the 
width  of  the  screen. 

- The  Image  option  sets  the  width  automatically,  based  on  the 
original  size  of  the  graphic. 
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Image  with  Resize  Warning  Icon 


Resize  Warnings 

When  you  change  the  size  of  an  image,  Adobe  GoLive  displays  a re- 
size warning  icon  on  top  of  the  image  to  remind  you  that  the  image 
may  have  an  unnecessarily  large  file  size  or  not  display  at  its  opti- 
mum resolution. 


The  resize  warning  icon  reminds  you  that  the  image 
might  not  display  at  its  optimum  resolution. 


Two  things  may  happen  when  you  resize  an  image: 

• If  you  place  an  oversized  image  on  your  page  and  downsize  it, 
your  page  may  reference  an  unnecessarily  large  image  hie, 
resulting  in  inefficient  use  of  bandwidth. 

• If  you  place  a small  image  on  your  page  and  enlarge  it,  the 
image  may  look  jagged. 

Resize  an  oversized  or  undersized  image  in  your  Web  imaging  appli- 
cation before  placing  it  on  your  page. 


Adjusting  Image  Alignment 


Top 

Middle 


Bottom 


Left 
Right 
Texttop 
Absmiddle 
Baseline 
Absbottom 


To  adjust  the  alignment  of  an  image  that  was  not  placed  on  a layout 
grid,  proceed  as  follows: 

To  align  the  image  relative  to  text  on  the  same  line,  select  an  op- 
tion from  the  Alignment  popup  menu: 

- The  Top  option  aligns  surrounding  text  with  the  top  of  the  im- 
age. 

- The  Middle  option  aligns  the  baseline  of  surrounding  text 
with  the  center  of  the  image. 

- The  Bottom  option  isthe  default  setting.  It  aligns  the  baseline 
of  surrounding  text  with  the  bottom  of  the  image. 

- The  Left  option  aligns  the  image  to  the  left  of  the  text. 

- The  Right  option  aligns  the  image  to  the  right  of  the  text. 

- The  Texttop  option  aligns  the  image  with  the  top  of  the  sur- 
rounding text. 

- The  Absmiddle  option  aligns  the  absolute  center  of  surround- 
ing text  with  the  image. 
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The  Baseline  option  aligns  the  image  with  the  baseline  of  the 
surrounding  text. 

The  Absbottom  option  aligns  the  absolute  bottom  of  the  sur- 
rounding text  with  the  bottom  of  the  image. 


The  alignment  options  are  inactive  when  the  current  image  is 
placed  on  a layout  grid.  To  change  the  relative  positioning  of, 
for  example,  a text  frame  and  an  image  on  a layout  grid,  click 
and  drag  the  text  frame  or  image. 


The  Special  Tab  of  the  Image  Inspector 


Use  these  options  to  adjust  the  behavior  of  the 
boundary  region  of  the  image. 


Type  in  a message  to  replace  the  image  here. 


Select  this  option  and  type  in  a name  to  use  the 
image  as  a form  button,  if  required. 


The  options  in  the  Focus  section  are  explained  in 
Chapter  9,  Working  with  Forms. 


{ 

{ 


Adjusting  Border  Width 


To  activate  a box  around  the  image  and  adjust  its  width,  proceed  as 
follows: 

1 Check  the  Border  checkbox. 

2 Type  in  the  desired  border  width  in  pixels  and  press  the  Return 
key  to  confirm  your  entry. 


When  the  border  width  attribute  is  set  to  0 and  the  image  is  the 
source  of  a hyperlink,  a chain  link  symbol  appears  to  indicate 
that  this  is  a linked  image. 
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Adjusting  Vertical  and  Horizontal  Spacing 


To  adjust  the  vertical  and  horizontal  spacing  between  the  image  and 
surrounding  text,  proceed  as  follows: 

1 In  the  HSpace  text  box,  type  in  the  horizontal  spacing  in  pixels 
and  press  the  Return  key  to  confirm  your  entry. 

2 In  the  l /Space  text  box,  type  in  the  vertical  spacing  in  pixels  and 
press  the  Return  key  to  confirm  your  entry. 


You  can’t  use  the  Vertical  and  Horizontal  Spacing  options  to 
create  extra  space  around  an  image  placed  on  a layout  grid.  To 
change  the  intermediate  spacing  between  text  and  images  on 
a layout  grid,  click  and  drag  the  text  frame  or  image. 


Selecting  an  Alternative  Message  Text 


To  select  an  alternative  message  text  for  browsers  that  don’t  support 
graphics  or  that  have  their  autoload  option  disabled,  proceed  as  fol- 
lows: 

Type  in  an  alternative  message  text  and  press  the  Return  key  to 
confirm  your  entry. 


Using  an  Image  as  a Form  Button 


To  convert  the  image  into  a form  button,  proceed  as  follows: 

1 Check  the  Is  Form  checkbox. 

2 Type  in  the  name  you  want  to  be  displayed  with  the  form. 


Using  the  Image  as  a Link 


To  convert  an  image  into  the  source  of  a link,  proceed  as  follows: 

1 With  the  image  selected,  click  the  New  Link  button  |££  in  the 
Toolbar  or  choose  New  Link  from  the  Special  menu. 
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2  Click  the  Link  tab  to  access  the  Link  options  of  the  Image  Inspec- 
tor. (You  can  also  click  the  New  Link  button  in  the  Link  tab  in- 
stead of  performing  Step  1 above.J 


The  Link  Tab  of  the  Image  Inspector 

Click  Link  to  view  the  Hyperlink  options. 

Type  in  the  Universal  Resource  Locator  here... 

. . . click  Browse  to  select  an  image  file  or  click 
to  Point  & Shoot. 

Click  the  New  Link  button  to  create  an  undefined 
link. 

Type  in  a name  for  the  link  here. 


Use  this  option  to  specify  the  target  frame  in  the 
destination  frame  set. 


This  checkbox  converts  the 
path  to  the  referenced  object 
to  an  absolute  path.  This 
option  is  discussed  in  the 
section  Setting  Up  Adobe 
GoLive  to  Use  Absolute  Paths 
on  page  719  in  Chapter  17, 
Managing  Web  Sites  with 
Adobe  GoLive. 


3 Type  in  a Universal  Resource  Locator  in  the  URL  text  box,  click  the 
Browse  button  to  locate  the  Web  page  in  the  subsequent  file  se- 
lection dialog,  or  use  Point  & Shoot.  Click  OK. 

4 A border  appears  around  the  image  to  indicate  that  it  is  the 
source  of  a hyperlink. 

5 To  turn  off  the  border,  proceed  as  follows: 

- Select  the  image. 

- Go  to  the  Special  tab  of  the  Image  Inspector,  check  the  Border 
checkbox,  and  set  its  value  to  “0”. 


Repairing  Image  References 


Missing  images  are  easy  to  find  because  they  will  appear  as  a ques- 
tion mark  icon  and  are  marked  with  a red  border  if  Adobe  GoLive’s 
Link  Warnings  (see  page  179)  feature  is  enabled. 

To  fix  the  problem,  proceed  as  follows: 

1 Select  the  image  and  open  the  Image  Inspector. 

2 In  the  Basic  tab  of  the  Inspector,  fix  the  URL  (use  Browse,  Point  & 
Shoot,  etc.). 
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Note  that  “Empty  References”  are  caused  when  you  select  an 
image  or  piece  of  hypertext  and  click  the  New  Link  button  |^J 
in  the  Toolbar  but  fail  to  define  the  destination  URL. 


Opening  Images  in  Their  When  you  set  the  appropriate  File  Mapping  preferences,  double- 

Native  Application  clicking  an  image  in  Layout  View  opens  it  in  its  native  application. 

The  File  Mapping  preferences  are  discussed  in  the  section  File  Map- 
ping Options  on  page  634  in  Chapter  17,  Managing  Web  Sites  with 
Adobe  GoLive. 


Alternative  Ways 
of  Handling 
Images 


Point  & Shoot 


Alternatively,  you  can  use  Adobe  GoLive’s  Point  & Shoot  feature  to 
link  a placeholder  with  the  image  of  your  choice: 

1 Select  the  placeholder. 

2 Click  the  Basic  tab  in  the  Image  Inspector. 

3 Click  the  Point  & Shoot  button  in  the  Image  Inspector. 

4 Drag  to  the  desired  image  in  the  Site  Window. 


Point  & Shoot  Linking  with 
an  Image  File  in  the  Site  Window 


Click  the  Point  & Shoot  button,  hold  the 
mouse  button  down, ... 


. . . and  drag  to  the  desired  image  in  the  Site 
Window. 
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Visual  feedback  indicates  that  Point  & Shoot  was  successful: 

• The  interconnecting  line  blinks  twice. 

• The  file  name  and  directory  path  appear  in  the  URL  text  box  of 
the  Image  Inspector. 


To  use  this  feature,  import  your  page  and  image  files  into  the 
Site  Window;  you  can  only  Point  & Shoot  at  an  icon  in  the  Site 
Window.  (For  details  on  site  management,  see  Chapter  17,  Man- 
aging Web  Sites  with  Adobe  GoLive.) 


Importing  Images  via  Drag  & Drop 


Drag  & Drop  Importing 
an  Image  File  from  the  Finder 


Importing  images  via  drag  & drop  is  a convenient  shortcut  for  com- 
patibility testing.  You  can  drag  & drop  to  import  graphics  files  from 
the  Finder,  including  GIF,  JPEG,  Progressive  JPEG,  PNG,  PICT,  and  TIFF 
files.  Adobe  GoLive  will  also  let  you  Command-Option-Drag  images 
for  previewing  from  Adobe  Photoshop  and  drop  them  on  the  docu- 
ment window  or  layout  grid. 
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Adobe  GoLive  automatically  converts  PICT  files  to  GIF,  JPEG,  Progres- 
sive JPEG,  or  PNG,  placing  them  in  the  Import  Images  folder  in  the 
Adobe  GoLive  program  folder  or  any  other  user-selectable  folder. 
When  you  are  satisfied  with  the  result,  move  them  to  your  Image  or 
Media  folder  in  your  site  folder. 
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Image  Preferences 


The  Preferences  - General  - Image  dialog  box  lets  you  make  various 
settings  that  influence  the  way  Adobe  GoLive  handles  images. 

To  select  an  import  folder  for  files  imported  for  previewing  via  drag 
& drop  from  the  Finder  or  other  applications,  proceed  as  follows: 

1 On  the  Image  tab,  locate  the  Import  Folder  text  box  (see  below). 

2 Click  Select  to  choose  another  import  folder,  or  leave  the  folder 
selection  unchanged  to  have  Adobe  GoLive  place  the  images  in 
the  Import  Images  folder  in  the  Adobe  GoLive  program  folder. 


Setting  Image  Import  Preferences 


Use  this  option  to  select  an  import  folder  for  PICT 
images  imported  via  drag  & drop. 


Select  these  options  to  enable  the  automatic 
conversion  of  PICT  images  imported  via  drag  & 
drop  to  GIF,  JPEG,  Progressive  JPEG,  or  PNG. 


Use  these  options  to  determine  the  storage  loca- 
tion for  low-resolution  images  and  have  them 
generated  by  default. 


Preferences 
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To  activate  the  automatic  conversion  to  GIF,  JPEG,  Progressive  JPEG, 
or  PNG,  proceed  as  follows: 

1 In  the  General  group  of  preferences,  click  the  Image  icon  to  open 
the  Image  tab. 

2 In  the  File  Format  group  of  options,  select  Ask  Userto  pick  a ded- 
icated format  for  each  file  you  import,  or  choose  an  option  from 
the  popup  menu  to  set  a default  format.  Three  basic  options  are 
available: 

- GIF:  GIF  has  a companion  Interlaced  checkbox  to  let  you 
choose  between  the  standard  and  interlaced  GIF  formats. 

- JPEG:  JPEG  has  a companion  Progressive  checkbox  to  let  you 
choose  between  the  standard  and  Progressive  JPEG  formats. 
An  additional  popup  menu  lets  you  choose  from  six  stan- 
dardized compression  levels. 

PNG:  PNG  has  a companion  Interlaced  checkbox  so  you  can 
choose  between  the  standard  and  interlaced  PNG  formats. 
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To  make  default  settings  for  low-resolution  images  that  appear  while 

the  main  image  is  loading,  proceed  as  follows: 

1 In  the  General  group  of  preferences,  click  the  Image  icon  to  open 
the  Image  tab. 

2 In  the  Low  Source  group  of  options,  select  Place  In  same  folder  as 
source  to  have  low-resolution  images  generated  by  Adobe  GoLive 
stored  in  the  same  folder  as  the  high-resolution  source  images, 
or  choose  Place  In  Import  Folder  to  have  them  temporarily  stored 
before  you  move  them  to  the  site  folder. 

3 Select  the  Auto-generate  by  default  option  to  instruct  Adobe 
GoLive  to  automatically  create  a low-resolution  copy  of  each  im- 
age you  import  and  add  it  to  the  page. 


Special  Note  on  Image  File  Names: 

To  save  your  audience  from  problems  with  images,  make  sure 
all  pictures  have  the  proper  extensions  to  identify  their  file 
type.  GIFs  should  end  in  .gif,  JPEGs  in  .jpg  or  .jpeg,  and  PNGs  in 
.png.  Although  the  Mac  OS  identifies  a file’s  creator/viewer  au- 
tomatically, Web  browsers  don’t,  so  you  must  show  them  what 
to  display.  To  alert  you  to  this  problem,  a link,  not  an  image, 
will  appear  if  you  drag  & drop  a file  without  the  proper  exten- 
sion directly  from  the  Site  into  the  Layout  window.  The  picture 
may  show  up  fine  in  the  Content  tab  of  the  File  Inspector,  but  it 
will  not  appear  in  Layout  mode. 
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Clickable  Image  Maps  Adobe  GoLive’s  editor  for  client-side  clickable  image  maps  lets  you 

create  clickable  maps,  edit  them  right  on  top  of  your  image,  and  link 
them  to  other  resources.  You  can  also  connect  the  hot-spot  areas  in 
a clickable  image  map  with  scripted  actions. 


Client-Side  Clickable  Image  Map 
and  Image  Inspector 


GoTotf 


“H 


This  circular  hot  spot  is  designed  to  link  the 
audience  to  a particular  page. 


Click  the  Map  tab  to  create  a clickable  image  map._ 

Checkthe  Use  Map  checkbox  to  turn  an  image  into 
a client-side  clickable  image  map  and  type  in  the  - 
map  name. 

Use  the  Map  Editor  tools  to  shape,  link,  and  color  - 
your  clickable  map  area. 

Type  in  the  destination  resource  here  ... 

. . . click  Browse  to  select  a local  resource  or  use 
the  Point  & Shoot  button  to  drag  and  link  to  a file 
icon  in  the  Site  Window. 

Use  this  option  to  specify  the  target  frame  in  the 
destination  frame  set. 


The  options  in  the  Focus  section  are  explained  in 
Chapter  9,  Working  with  Forms. 


□ Clickable  Image  Map  Inspector @ 


Basic  ^ Spec,  f Map  \ Link 


Actions 


-R  Use  Map  Map  Name 


Navigate 


□ URL  [ 


l~~1  Absolute  1 Brovse...  | 
]© 


Inserting  a Clickable  Map 


Because  image  maps  are  images  with  clickable  hot  spots,  you  must 
insert  an  image  before  you  can  get  started.  For  instructions,  please 
refer  to  the  section  Inserting  an  Image  on  page  1 51 . 

To  insert  an  image  and  convert  it  into  a clickable  map,  proceed  as  fol- 
lows: 

1 Drop  the  Image  icon  onto  your  document  window. 

2 Select  an  image. 

3 Click  the  Map  tab  in  the  Image  Inspector  window. 

4 Under  the  Map  tab,  check  the  Use  Map  checkbox. 

5 Type  in  a name  in  the  Map  Name  text  box  to  identify  it  as  a 
unique  object  on  your  Web  page,  and  press  the  Return  key  to 
confirm  your  entry. 


Clickable  Image  Maps 
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Editing  a Clickable  Map 

SI 


You  can  edit  the  hot-spot  area  of  the  image  map  using  the  toolbar  in 
the  Map  tab.  The  toolbar  features  map-specific  buttons  that  let  you 
introduce  shape  and  color  and  otherwise  edit  your  map  area. 

To  draw  a hot-spot  area  and  adjust  display  options,  proceed  as  fol- 
lows: 


1  Click  to  select  one  of  the  three  map  drawing  tools: 


This  button  allows  you  to  draw  rectangular  hot  spots. 


This  button  lets  you  draw  circular  hot  spots. 


This  button  allows  you  to  draw  polygonal  hot  spots. 
(Double-clicking  an  existing  polygon  lets  you  edit  the 
map  points  later  on.) 


2 Draw  the  map  at  the  desired  location. 

3 Click  the  following  buttons  to  better  identify  multiple  hot  spots: 


This  button  toggles  the  border  around  the  hot  spot  on 
and  off. 


I'—l  This  button  toggles  the  fill  pattern  of  the  hot  spot  on 
| Cp  | and  off. 


This  button  opens  the  Color  Palette,  allowing  you  to 
select  a different  fill  color  for  the  hot  spot.  (Red  is  de- 
fault.) 


This  button  toggles  the  name  of  the  referenced  re- 
source on  and  off. 
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Linking  a Clickable  Map 
with  a Page 

0 


Point  & Shoot  Linking  with  a 
Resource  from  the  Site  Window 


Click  the  Point  & Shoot  button. . . 


. . . and  drag  to  the  desired  resource  file  in  the 
Site  Window. 


Building  Web  Pages 


4 If  you  are  working  with  multiple  overlapping  hot  spots,  use  the 
following  buttons  to  manage  them: 

SThis  button  activates  the  cursor,  allowing  you  to  resize 
and  rearrange  hot  spots. 

I  j — >1  This  button  brings  the  current  hot  spot  to  the  front. 

m 


This  button  sends  the  current  hot  spot  to  the  back. 


You  can  use  Adobe  GoLive’s  Point  & Shoot  feature  to  link  clickable 
image  maps  with  Web  pages. 

To  link  clickable  maps  with  Web  pages,  proceed  as  follows: 

1 Click  the  Point  & Shoot  button  in  the  Image  Inspector. 

2 Drag  to  the  desired  resource  file  in  the  Site  Window. 

3 Click  the  Preview  tab  to  test  the  new  link. 


This  checkbox  converts  the  path 
to  the  referenced  object  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
17,  Managing  Web  Sites  with 
Adobe  GoLive. 


Clickable  Image  Maps 
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Using  Actions  with 
Images  Maps 

Color  Sync™  2.5 


ColorSync™  Options  in  the  Link  Tab  of  the 
Image  Inspector 


Selects  the  RGB  standard  profile. 

Selects  an  external  color  profile. 

Deactivates  color  matching. 

Displays  the  name  of  a color  profile  embedded  in 
a JPEG  image. 


Visual  feedback  indicates  that  Point  & Shoot  was  successful: 

• The  interconnecting  line  blinks  twice. 

• The  file  name  and  directory  path  appear  in  the  URL  text  box  of 
the  Image  Inspector. 

Because  you  can  only  Point  & Shoot  at  an  icon  in  the  Site  Win- 
dow, import  your  page  and  image  files  into  the  Site  Window  to 
use  this  feature.  (For  more  details  on  site  management,  see 
Chapter  17,  Managing  Web  Sites  with  Adobe  GoLive.) 


For  instructions  on  using  actions,  please  refer  to  Part  13  — Using  Ac- 
tions on  page  269  in  Chapter  5,  Dynamic  HTML. 


Adobe  GoLive  supports  Color  Sync™  2.5,  Apple  Computer  Inc’s  pre- 
mier color  matching  technology.  JPEG  images  are  displayed  in  true 
colors,  based  on  ICC-compatible  color  profiles  that  are  either  embed- 
ded in  the  image  itself  or  come  as  stand-alone  files.  Color  Sync™  2.5 
reconciles  the  color  spaces  of  JPEG  images  and  computer  monitors, 
allowing  both  the  author  and  the  visitor  to  view  JPEG  images  without 
any  artefacts. 


Using  Color  Sync™  2.5  at  Single-Image  Level 

The  color  matching  options  for  individual  images  reside  on  the  Link 
tab  of  the  Image  Inspector.  They  are  available  after  selecting  a JPEG 
image  in  the  document  window.  The  following  screenshot  illustrates 
the  ColorSync™  options  of  the  Image  Inspector  and  provides  brief  de- 
scriptions of  their  respective  functions. 


This  checkbox  converts  the  path 
to  the  referenced  profile  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
1 7,  Managing  Web  Sites  with 
Adobe  GoLive. 
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ColorSync™  Options  in  the  ColorSync™ 
Tab  of  the  Page  Inspector 


Building  Web  Pages 


To  use  the  ColorSync™  options  in  the  Link  tab  of  the  Image  Inspector, 
proceed  as  follows: 

• Standard  activates  an  RGB  standard  profile  built  into  Adobe 
GoLive  for  the  current  image. 

• Profile : Enter  an  URL  (for  example  the  folder  path  and  name  of  a 
color  profile  on  the  local  hard  disk)  in  the  Profile  text  box,  click 
the  Browse...  button  and  select  a profile  in  the  subsequent  file 
selection  dialog,  or  click  the  Point  & Shoot  button  and  drag  to 
an  ICC-color  profile  in  the  Site  window. 

References  to  external  color  profiles  are  not  monitored  by 
Adobe  GoLive's  built-in  link  parser.  After  uploading  your  site  to 
your  ISP's  FTP  server,  you  should  check  whether  the  stand- 
alone ICC  color  profile  has  been  included  in  the  upload. 

• None  deactivates  ColorSync™  support  for  the  selected  image. 

• Embedded  displays  the  name  of  an  embedded  color  profile  in  a 
selected  JPEG  image.  Embedding  color  profiles  in  JPEG  images  is 
a feature  supported  by  the  most  recent  versions  of  popular 
imaging  programs,  such  as  Adobe  Photoshop. 

Embedded  color  profiles  in  JPEG  images  are  currently  only  sup- 
ported by  Microsoft  Internet  Explorer  as  of  Version  4.01. 


Using  Color  Sync™  2.5  at  Page  Level 


The  global  color  matching  options  for  Web  pages  reside  on  the  Col- 
orSync™ tab  of  the  Page  Inspector.  The  following  screenshot  illus- 
trates the  ColorSync™  options  of  the  Page  Inspector  and  provides 
brief  descriptions  of  their  respective  functions. 


□ Page  Inspector 

^ Page  HTML  Pending  f ColorSy^ 


nc*- 


J Default 

s>  Profile  ||ln^the^Works/Newsletter^Site /special 


) None 


| Brovse...  | 


Selects  the  RGB  standard  profile. 
Selects  an  external  color  profile. 
Deactivates  color  matching. 


Horizontal  Lines 


167 


The  Preferences  - ColorSync ™ Dialog  Box 

This  checkbox  activates  ColorSync™. 

This  checkbox  activates  the  standard  profile. 


3 


Horizontal  Lines 


The  radio  buttons  in  the  ColorSync™  tab  of  the  Page  Inspector  work 
exactly  like  their  counterparts  in  the  Image  Inspector,  the  only  differ- 
ence being  that  the  selections  you  make  here  are  applied  to  all  JPEG 
images  on  the  page. 

Color  Sync™  2.5  Preferences 

The  interaction  between  Adobe  GoLive  and  ColorSync™  is  controlled 
by  checkboxes  in  the  Preferences  - ColorSync ™ dialog  box. 


Use  the  options  in  the  Preferences  - ColorSync™  dialog  box: 

• By  deactivating  the  Display  Images  with  ColorSync™  checkbox, 
you  can  disable  ColorSync™  support  through  Adobe  GoLive. 

• The  Use  Default  RGB  Profile  if  not  specified  checkbox  lets  Adobe 
GoLive  resort  to  a built-in  default  color  profile  when  you  activate 
ColorSync™  but  do  not  specify  a dedicated  profile  for  an  image. 


Adobe  GoLive  lets  you  insert  horizontal  lines,  also  called  rules,  to 
help  you  structure  your  page  with  visual  separators. 

Lines  come  in  two  styles — three-dimensional  hollow  and  solid.  You 
can  use  the  Line  Inspector  to  toggle  the  line  style  from  hollow  to  solid 
and  vice  versa. 
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Inserting  Lines 


Inserting  a Horizontal  Line 


To  insert  a horizontal  line,  proceed  as  follows: 

1 Drag  either  Line  icon  from  the  Palette  and  drop  it  on  your  layout 
grid  or  document  window. 

2 Drag  the  line  to  the  desired  location  on  the  layout  grid,  or  use  the 
Line  Inspector  to  align  it  if  you  are  not  using  a layout  grid. 


tal  line. 


Resizing  Lines 


Selected  Line  with  Resize  Handle 


To  resize  a horizontal  line,  proceed  as  follows: 

1 In  the  document  window,  click  to  select  the  line  and  display  the 
sizing  handle. 

2 Click  the  handle  to  resize  the  thickness  of  the  line. 


Click  the  handle  to  resize  the  line. 


3  Set  the  width  of  the  line  using  the  Line  Inspector. 


Horizontal  Lines 
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Editing  Line  Attributes  The  context-sensitive  Inspector  window,  titled  Line  Inspector  if  you 

choose  a horizontal  line,  will  allow  you  to  toggle  between  the  solid 
and  three-dimensional  line  styles,  resize  the  line  accurately,  and  se- 
lect alignment. 


The  Line  Inspector 

Click  either  button  to  toggle  line  style. 
Use  these  options  to  resize  the  line. 
Click  a button  to  set  line  alignment. 


Toggling  Line  Style 


Totogglethe  linestylefrom  three-dimensional  to  solid  orvice  versa, 
proceed  as  follows: 

1 In  the  document  window,  click  to  select  the  line. 

2 In  the  Line  Inspector,  click  the  line  style  button  that  is  inactive. 


Resizing  a Line  Using  the  Line  Inspector 


• Full 


Percent 

Pixels 


To  resize  a horizontal  line  using  the  Line  Inspector,  proceed  as  fol- 
lows: 

1 Place  the  cursor  in  the  Width  text  box,  enter  the  desired  width, 
and  press  the  Return  key  to  confirm  your  entry. 

You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Width  text  box: 

- The  Full  option  extends  the  line  over  the  entire  width  of  the 
layout  grid  or  document  window. 

- The  Percent  option  lets  you  enter  the  width  relative  to  the 
width  of  the  layout  grid  or  document  window. 

- The  Pixels  option  lets  you  enter  the  height  precisely  in  pixels. 
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2 Place  the  cursor  in  the  Height  text  box,  enter  the  desired  height, 
and  press  the  Return  key  to  confirm  your  entry. 


Aligning  a Line 


Toalign  a horizontal  line  using  the  Line  Inspector,  proceed  as  follows: 

Click  one  of  the  three  alignment  buttons  (inactive  when  the  line 
is  placed  on  a layout  grid): 

This  button  aligns  the  line  to  the  left  margin  (default 
alignment). 

This  button  centers  the  line  with  respect  to  the  docu- 
ment window. 


This  button  aligns  the  line  to  the  right  margin. 


Horizontal,  Vertical, 
and  Block  Spacers 


Horizontal  Spacers  Can  Be  Used 
to  Position  Text 


Adobe  GoLive  lets  you  insert  horizontal  spacers  into  your  HTML  code 
and  convert  them  into  vertical  or  block  spacers,  if  desired. 

Spacers  help  you  structure  your  page  layout  by  creating  a user-resiz- 
able white  space  between  text  and  objects.  In  pages  designed  for 
Netscape  Navigator,  they  are  particularly  useful  when  you  are  work- 
ing without  the  layout  grid  and  want  more  control  over  your  layout. 
The  following  screenshot  shows  how  you  can  use  spacers  to  manip- 
ulate text. 


Frequent  Flyer  has  the  most r 
bonus  programs,  covering 
There' re  also  an  "Index 
Side  Rating  Compan* 

*score  by  score. 

Use  spacers  with  care.  They  are  based  on  a Netscape-specific 
tag  that  works  well  with  Navigator  3.0  or  later  versions  but  is 
ignored  by  Microsoft  Internet  Explorer. 


Horizontal,  Vertical,  and  Block  Spacers 
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Inserting  Spacers 


To  insert  a spacer,  proceed  as  follows: 

Drag  the  Spacer  icon  from  the  Palette  and  drop  it  on  your  document 
window. 


Inserting  a Horizontal  Spacer 


Toggling  Spacer 
Style 


To  toggle  the  spacer  style  from  horizontal  to  vertical  or  block,  pro- 
ceed as  follows: 

1 In  the  document  window,  click  to  select  the  spacer. 

2 In  the  Spacer  Inspector,  click  the  desired  spacer  style  button. 

3 Return  to  the  document  window  and  resize  the  spacer. 


Resizing  Spacers 


To  resize  a spacer,  proceed  as  follows: 

1 In  the  document  window,  click  to  select  the  spacer  and  display 
the  sizing  handles: 

Horizontal  spacers  resize  only  left  or  right  and  have  one  han- 
dle at  the  far  right. 

- Vertical  spacers  resize  only  up  or  down  and  have  one  handle 
at  the  lower  middle. 

Block  spacers  resize  in  both  directions  and  have  three  han- 
dles: one  at  the  far  right,  one  at  the  lower  middle,  and  one  at 
the  lower  right  corner.  (To  learn  more  about  how  to  create 
block  spacers,  see  Editing  Spacer  Attributes  below). 

2 Click  the  right  handle  to  resize  the  width,  the  lower  middle  han- 
dle to  resize  the  thickness,  or  the  one  at  the  lower  right  corner  to 
resize  the  width  and  thickness  at  the  same  time. 
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Selected  Block  Spacer  with  Resize  Handles 


a 


Click  a handle  to  resize  the  spacer. 


Editing  Spacer  Attributes  The  context-sensitive  Inspector  window,  titled  Spacer  Inspector  when 

you  select  a spacer,  enables  you  to  resize,  reshape,  and  align  the 
spacer  to  meet  your  needs. 


The  Spacer  Inspector 

Click  a button  to  select  a spacer  style. 


Use  these  options  to  resize  the  spacer. 

Use  this  popup  menu  to  set  spacer  alignment. 


Resizing  a Spacer  Using  the  Spacer  Inspector 


To  resize  a spacer  precisely  using  the  Spacer  Inspector,  proceed  as  fol- 
lows: 

1 In  the  document  window,  click  to  select  the  spacer. 

2 In  the  Spacer  Inspector,  place  the  cursor  in  the  Width  text  box 
(horizontal  and  block  spacers  only),  enter  the  desired  width  in 
pixels,  and  press  the  Return  key  to  confirm  your  entry. 

3 Place  the  cursor  in  the  Heighttext  box  (vertical  and  block  spacers 
only),  enter  the  desired  height  in  pixels,  and  press  the  Return  key 
to  confirm  your  entry. 


Aligning  a Block  Spacer 


Th e Align  popup  menu  in  the  Spacer  Inspector  window  lets  you  con- 
trol the  alignment  of  block  spacers  relative  to  the  surrounding  text. 

To  align  a block  spacer,  select  an  option  from  the  Alignment  popup 


menu: 


Unknown  Start  and  End  Tags 
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|»  Default 

Middle  * 

Bottom 

Left 

Right 

Texttop 

Absmiddle 

Baseline 

Absbottom 


The  Top  option  aligns  surrounding  text  with  the  top  of  the 
spacer. 

The  Middle  option  horizontally  centers  the  baseline  of  sur- 
rounding text  with  the  spacer. 

The  Bottom  option  is  the  default  setting.  It  aligns  the  baseline 
of  surrounding  text  with  the  bottom  of  the  spacer. 

The  Left  option  aligns  the  spacer  to  the  left  of  the  text. 

The  Right  option  aligns  the  spacer  to  the  right  of  the  text. 
The  Texttop  option  aligns  the  spacer  with  the  top  of  the  sur- 
rounding text. 

The  Absmiddle  option  horizontally  aligns  the  absolute  center 
of  surrounding  text  with  the  spacer. 

The  Baseline  option  aligns  the  spacerwith  the  baseline  of  the 
surrounding  text. 

The  Absbottom  option  aligns  the  absolute  bottom  of  the  sur- 
rounding text  with  the  bottom  of  the  spacer. 


Unknown  Start 
and  End  Tags 


Unknown  Tag  Displayed 
by  Adobe  Gotive 


HyperText  Markup  Language  (HTML)  is  an  ever-evolving  language, 
and  new  tags  are  created  often.  To  ensure  that  your  Web  pages  are 
always  up  to  date  and  use  the  latest  technology,  you  can  insert  place- 
holders for  tags  that  Adobe  GoLive  doesn’t  recognize,  type  in  the  new 
tag  names,  and  edit  tag  attributes. 

The  following  screenshot  shows  an  example  based  on  the  (fictitious) 
NEWTAG  element. 


<NE'','/TAG>  hr nn  can  wrap  up  text  in  nev  tags. 


< /NEWT AG > 
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Inserting  an 
Unknown  Tag 


To  insert  an  unknown  tag,  proceed  as  follows: 

1  Drag  the  Start  Tag  icon  from  the  Palette  and  drop  it  on  your  doc- 
ument window. 


Inserting  a Start  Tag  and  End  Tag 


Drag  the  Tag  and 
EndTagiconsfrom 
the  Palette  onto 
your  document 
window  to  insert  a 
pair  of  unknown 
tags. 


<TAG> 


</T  AG> 


2 Name  the  new  tag  and  specify  its  attributes  in  the  Tag  Inspector 
(see  Specifying  a New  Tagon  page  775).Type  in  text  or  insert  other 
content. 

3 Add  and  name  the  End  Tag  accordingly  using  the  Endtag  Inspec- 
tor (only  if  the  new  feature  requires  a closing  tag). 


The  Tag  Inspector 

Type  in  the  tag  name  here. 


View  the  tag  attributes  and  values  in  the  at- 
tribute list  box. 


Type  in  the  attribute  name  and  value  here. 
Click  this  button  to  delete  an  attribute. 


Click  this  button  to  add  a new  attribute. 


Links  and  Anchors 
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Specifying  a 
New  Tag 


To  name  the  new  tag,  proceed  as  follows: 

4 In  the  document  window,  click  to  select  the  unknown  start  tag. 

5 In  the  Tag  Inspector,  enter  the  name  of  the  new  tag  in  the  Tag- 
name  text  box  and  press  the  Return  key  to  confirm  your  entry. 

6 Click  the  New  button  to  add  a new  attribute.  (This  activates  the 
text  boxes  below  the  list  box.) 

7 Enter  an  attribute  name  in  the  left  text  box  and  press  the  Return 
key  to  confirm  your  entry.  The  attribute  name  will  appear  in  the 
Attribute  column  of  the  list  box. 

8 Enter  an  attribute  value  in  the  right  text  box  and  press  the  Return 
key  to  confirm  your  entry. 

9 The  attribute  value  will  appear  in  the  Value  column  of  the  list 
box. 

To  rename  an  existing  tag  or  edit  a tag  attribute,  click  the  Tagname 

text  box  or  the  desired  attribute  in  the  list  box. 

When  you  rename  a tag,  remember  to  click  the  closing  tag  and 
rename  it  accordingly  in  the  Endtag  Inspector. 

To  delete  the  currently  selected  attribute,  click  the  Delete  button. 


Links  and  Anchors  You  can  use  Point  & Shoot,  Adobe  GoLive’s  convenient  link  creation 

tool,  with  text  to  reference  information  resources  in  your  site  quickly 
and  efficiently.  You  can  link  selected  text  with  other  resources  in  your 
site  in  two  alternative  ways: 

• Use  Point  & Shoot  to  link  text  with  a page  or  selected  location  in 
a text  frame  or  HTML  text  flow,  inserting  an  anchor  in  the  pro- 
cess. The  destination  of  the  link  may  be  on  the  same  page  or  in 
another  on-screen  window — for  example,  another  document  or 
an  item  in  the  Site  Window,  such  as  an  E-mail  address.  (For  more 
details,  see  the  description  of  the  Site  Window  in  Chapter  17, 
Managing  Web  Sites  with  Adobe  GoLive). 

• Insert  anchors  from  the  Palette  and  link  to  them  using  Point  & 
Shoot. 
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Point  & shoot  Insertion  of  The  following  screenshot  illustrates  insertinga  linkand  anchor  com- 

Links  and  Anchors  bination 


Point  & Shoot  Insertion  of  a Link 
and  Anchor  Combination 


Click  and  drag  to  select  the  origin  of  the  link, 
then  command-dick  and  drag  the  link  where 
you  want  it  to  go. 


Drop  the  link  at  the  desired  destination  and 
watch  the  anchor  symbol  appear. 


Layout  ITl^  l~H]  Source  pfl]  PH] 


untitled  3.html 
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It's  time  for  the 
annual  celebration 
of  the  funniest, 


Program  Reviews 

Jody  Rothchild's  version  of  the  Letterman  Top 
Ten  list:  the  10  greatest  bonus  programs  for 
frequent  travelers.  Updated  monthly. 
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Travel 


oeooctoooootw- 


The  newsletter  tor  frequent  flyers. 


Fly-Away  Vacations 


— From  families  to  honeymooners,  these  vacations 

— are  sure  to  please.  Check  out  the  lower  winter 
fares  and  save  a bundle.  Call  before  6pm! 


To  insert  a link  and  anchor  combination  via  Point  & Shoot,  proceed 
as  follows: 

1 Click  and  drag  to  select  the  text  you  wish  to  use  as  the  origin  of 
the  link. 

2 Command-click  the  selected  text  and  drag  the  resulting  line  to 
the  desired  destination,  which  may  be  in  a layout  text  box,  table 
or  any  location  in  the  flow  of  HTML  text. 

Command  clicking  changes  the  shape  of  the  cursor. 

3 Release  the  mouse  button  to  insertan  anchorand  attach  the  link 
in  the  process. 


Links  and  Anchors 
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Things  to  Know  About 
Anchors 


Inserting  an  Anchor 
from  the  Palette 


The  following  section  addresses  a few  important  issues  connected 

with  the  use  of  anchors: 

• Anchors  sometimes  don’t  work  the  same  way  in  Netscape  Navi- 
gator/Communicator and  Microsoft  Internet  Explorer,  so  you 
should  test  them  extensively  with  both  products  before  publish- 
ing your  site. 

• There  are  link  and  anchor  combinations  that  don’t  work  in 
Adobe  GoLive’s  Preview  mode. 

• There  are  locations  in  a Web  page  where  anchors  work  well  with 
all  browsers,  and  there  are  locations  where  they  don’t: 

Don’t  put  an  anchor  icon  directly  on  a layout  grid.  Instead, 
place  anchors  in  the  flow  of  HTML  text,  in  a layout  text  box, 
or  in  a table.  (You  can  add  a small  layout  text  box  to  the  lay- 
out grid  to  hold  the  anchor.)  You’ll  get  more  consistent  results 
if  you  put  the  anchor  near  the  left  margin  of  the  page. 

• You  cannot  anchor  directly  to  a graphic.  HTML  does  not  yet  sup- 
port this  feature. 


You  can  also  drag  an  anchor  from  the  Palette,  drop  it  in  the  destina- 
tion document,  and  give  it  a unique  name  before  you  Point  & Shoot 
to  link  to  it. 

This  feature  is  particularly  useful  if  the  destination  page  is  referenced 
by  more  than  one  source  and  contains  multiple  anchors.  Although 
Adobe  GoLive  automatically  attaches  a numerical  index  to  each  new 
anchor  to  make  it  a unique  entity,  using  clear  text  names  makes  it 
easier  for  the  user  to  keep  track  of  the  links  pointing  to  a particular 
page. 
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To  insert  an  anchor  from  the  Palette,  proceed  as  follows: 

1  Drag  the  Anchor  icon  from  the  Palette  and  drop  it  in  your  docu- 
ment. 


Inserting  an  Anchor 


The  Anchor  Inspector 

Type  in  a unique  anchor  name  here. 


2  In  the  Name  text  box  of  the  Anchor  Inspector  window,  type  a 
unique  name  for  the  new  anchor.  This  allows  you  to  keep  track 
of  your  links  even  when  the  page  contains  multiple  anchors. 


Drag  the  Anchor 
icon  from  the  Pal- 
ette onto  your  docu- 
ment window  to 
insert  an  anchor. 


3  When  you  are  finished  naming  the  anchor,  link  it  this  way: 

- Select  the  text  or  object  you  wish  to  link  from. 

- Go  to  the  Link  Inspector  and  Point  & Shoot  from  there  to  the 
anchor. 


Basic  HTML  Tags 
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Inspecting  and  Creating  Adobe  GoLive’s  Text  Inspector  lets  you  inspect  the  properties  of,  cre- 

Hyperlinks  with  the  Text  ate,  and  name  hyperlinks  within  text,  including  URLs  and  anchors. 

Inspector 


The  Link  Tab  of  the  Text  Inspector 


Type  in  a URL,  click  Browse  to  select  a destina- 
tion file,  or  use  the  Point  & Shoot  button  to  link 
to  another  page. 

Type  in  a name  for  the  link  here. 


Use  this  option  to  specify  the  target  frame  in 
the  destination  frame  set. 


□ Text  Inspector § 

Link  ) Stijle  ] Actions  ) 


html  /T  ra  velingUnlimited  .html 


Absolute  Brovse...  I 


-Title 
-^Tar  get 


This  checkbox  converts  the  path 
to  the  referenced  object  to  an 
absolute  path.  This  option  is  dis- 
cussed in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe 
GoLive. 


To  inspect  a link,  proceed  as  follows: 

1 Select  the  link  within  the  document  window. 


2 A URL,  destination  anchor,  or  URL  and  anchor  combination  ap- 
pear in  the  URL  text  box.  The  title,  if  any,  appears  in  the  Title  text 
box. 


To  create  a link  that  points  to  the  head  of  an  HTML  page,  proceed  as 
follows: 

1 Select  the  link  within  the  document  window. 

2 Click  the  New  Link  button  [co]  in  the  Toolbar. 

3 Return  to  the  Text  Inspector  and  type  in  the  URL  in  the  URL  text 
box,  click  the  Browse  button  to  locate  the  destination  file  in  the 
subsequent  file  selection  dialog,  or  use  Point  & Shoot. 

4 To  unlink  text  you  don’t  want  to  be  part  of  the  hyperlink,  click  the 
Remove  Link  button  in  the  Toolbar. 
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Link  Warnings  Because  Adobe  GoLive  monitors  the  integrity  of  hyperlinks  in  a site, 

it  can  alert  you  to  problems  resulting  from  broken  links. 


Locating  Broken  Links 


If  the  Link  Warning  feature  is  enabled,  broken  links  will  be  marked 
with  a red  border  (images)  or  a red  highlight  (text) — both  in  the  doc- 
ument and  in  the  URL  text  box  of  the  Inspector. 

To  enable  the  link  warning  feature,  proceed  as  follows: 

Click  the  Link  Warnings  button  in  the  Toolbar. 

Alternatively,  you  can  go  to  the  Edit  menu  and  choose  Show  Link 
Warnings  or  press  Command-Shift-L. 


Tip:  Be  sure  you  are  working  with  a Site  Window  in  managing 
your  Web  site  and  links  at  all  times! 


Repairing  Broken  Links 


To  fix  broken  links,  proceed  as  follows: 

• For  images:  Select  the  image,  open  the  Image  Inspector,  click  the 
Link  tab,  locate  the  page  that  is  no  longer  referenced,  then  fix 
the  URL  using  Point  & Shoot. 

• For  hypertext:  Select  the  hypertext,  open  the  Text  Inspector,  click 
the  Link  tab,  locate  the  page  that  is  no  longer  referenced,  then 
fix  the  URL  using  Point  & Shoot. 


Note  that  “Empty  References"  occur  when  you  select  an  image 
or  piece  of  hypertext  and  click  the  New  Link  button  [^J  in  the 
Toolbar  but  fail  to  define  the  destination  URL. 


Links  and  Anchors 
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The  Preferences  - General  - Display 
Dialog  Box 


Use  these  options  to  set  the  color  and  box  out- 
line preferences  for  link  warnings. 


Link  Warning  Preferences 

You  can  set  various  display  preferences  for  the  Link  Warning  feature, 
including  text  color,  background  color,  and  box  size. 


Set  the  following  options  in  the  Preferences  - General  - Display  dialog: 

• Drag  a color  from  the  Color  Palette  onto  the  Styles  color  field  to 
select  a custom  color  for  CSS  styles  marked  up  using  the  Layout 
View  Controller. 

• Drag  a color  from  the  Color  Palette  onto  the  Link  Warnings  color 
field  to  select  a custom  background  or  outline  color  (red  is 
default)  for  broken  links. 

• Choose  an  option  from  the  Frame  Border  popup  menu  to  set  the 
size  of  the  color  box  that  marks  link  warnings  in  the  text  or 
around  images. 


Customizing  Resize 
Handles 


• Large 


Medium 
| Small 


3 


The  Sizeknobs  group  of  options  controls  the  display  attributes  of  the 
resize  handles  appearing  when  you  select  any  of  the  HTML  objects 
that  Adobe  GoLive  supports.  Display  options  include: 

• The  default  2D  option  lets  the  resize  handles  appear  as  two- 
dimensional  boxes. 

• The  3D  option  lets  the  resize  handles  appear  as  three-dimen- 
sional objects. 

• The  color  field  allows  you  to  select  a custom  color  from  the  Mac 
OS  color  picker. 

• The  size  popup  menu  controls  the  size  of  the  resize  handles. 


Building  Web  Pages 


Comments 


Inserting  a Comment 


The  Comment  Inspector 
Type  your  comment  in  here. 


Adobe  GoLive  lets  you  insert  hidden  comments  anywhere  on  your 
page,  allowing  you  to  add  publishing  information  for  future  refer- 
ence. You  need  a Web  page  editor,  such  as  Adobe  GoLive,  to  view 
comments. 

To  insert  a comment  from  the  Palette,  proceed  as  follows: 

1 Drag  the  Comment  icon  from  the  Palette  and  drop  it  in  your  doc- 
ument. 


Drag  the  Comment 
icon  from  the  Pal- 
ette onto  your  docu- 
ment window  to 
insert  a comment. 

2 Type  descriptive  text  in  the  context-sensitive  Inspector  window, 
now  titled  Comment  Inspector. 


Line  Breaks 
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Line  Breaks  For  more  convenience  in  text  editing,  you  can  insert  line  breaks  via 

drag  & drop  from  the  Palette  and  configure  them  using  a dedicated 
Inspector.  When  inserted  in  a simple  HTML  flow  or  layout  text  box, 
line  breaks  start  a new  line  without  placing  a blank  line  of  text  be- 
tween the  two  sections  they  separate.  The  line  break  attributes  ac- 
cessible via  the  Inspector  control  the  way  multiline  text  flows  around 
an  adjacent  object. 


You  only  need  a line  break  to  let  text  wrap  before  it  reaches  the 
right  margin  of  the  document  window  or  layout  text  box. 


Inserting  a Line  Break 


Drag  the  Line  Break 
icon  from  the  Palette 
and  drop  it  on  the 
layout  grid  or 
document  window. 


4i 

To  insert  a line  break,  proceed  as  follows: 

1 Drag  the  Line  Break  icon  from  the  Palette. 

2 Drop  it  at  the  location  where  you  want  the  line(s)  to  break. 
Alternatively,  you  can  insert  a line  break  at  the  current  insertion 
point  by  pressing  Shift-Return. 


The  Line  Break  Inspector 


Click  this  checkbox  to  activate  the  popup  menu 
with  line  break  options. 


3 Select  the  line  break  symbol  in  the  document  window  and  click 
the  Clear  checkbox  in  the  Line  Break  Inspector. 


184 


CHAPTER  4 


Building  Web  Pages 


|*  All 

D 

Left 

I Right 

J 

4 To  adjust  its  behavior  with  respect  to  an  adjacent  object  in  an 

HTML  flow,  choose  an  option  from  the  Clear  popup  menu: 

- All  moves  the  next  line  below  the  bottom  of  a right-aligned 
or  left-aligned  object  spanning  the  current  line. 

- Left  moves  the  next  line  below  the  bottom  of  a left-aligned 
object. 

- Right  moves  the  next  line  below  the  bottom  of  a right-aligned 
object. 


Please  note  that  the  proper  alignment  of  the  floating  object  de- 
termines the  way  the  Clear  attribute  works  in  an  HTML  text 
flow.  The  object  must  be  right-aligned  or  left-aligned  to  pro- 
duce an  acceptable  result. 


Using  Line  Breaks  to  Control  Text  Flow 

Left-aligned  image,  line  breaks  with  “Clear 
Right”  option  selected. 


The  image  was  inserted  before  the  text. 


The  following  example  illustrates  the  effect  of  the  line  break  options 
with  a left-aligned  and  a right-aligned  image: 


Frequent  Flyer  has  the  most  extensive  and  detailed.1 
reviews  of  frequent  flyer  bonus  programs,  covering  <■ 
North  American  as  well  as  international  programs . * 
There  re  also  an  "Index  to  Frequent  Flyer  Program  <> 
Ratings"  and  "Side  by  Side  Rating  Comparisons"  that  «■ 
show's  how  each  program  measures  up  - score  by  scores 


Right-aligned  image,  line  breaks  with  “Clear  Left” 
option  selected. 


Frequent  Flyer  has  the  most  extensive  and  detailed  * 
review's  of  frequent  flyer  bonus  programs , covering  e 

North  American  as  well  as  international  programs.  e 

There  re  also  an  "Index  to  Frequent  Flyer  Program  •> 
Ratings"  and  "Side  by  Side  Rating  Comparisons"  that  * 
shows  how  each  program  measures  up  - score  by  score. e 
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Advanced  Tags 

Part  9 discusses  some  of  the  more  advanced  tags  that  require  a good 

working  knowledge  of  World  Wide  Web  technology: 

• The  JavaScript  section,  starting  on  page  185,  introduces  Adobe 
GoLive’s  scripting  capabilities  for  Web  pages. 

• The  Java  Applets  section,  starting  on  page  196,  explains  Adobe 
GoLive’s  interface  for  Java  applets. 

• The  Plugins  section,  starting  on  page  202,  explains  Adobe 
GoLive’s  front  end  for  plugin  technology,  such  as  Apple’s  Quick- 
Time plugin  that  lets  Web  browsers  play  back  movies.  This  sec- 
tion also  describes  Adobe  GoLive’s  custom  interface  for 
unknown  plugins. 

• The  Floating  Boxes  section,  starting  on  page  212,  tel  Is  you  howto 
use  stackable  floating  boxes,  a new  document  formatting  tool 
available  with  HTML  4.0  and  Cascading  Style  Sheets  technology. 


Adobe  GoLive’s  built-in  support  for  Netscape’s  JavaScript  scripting 
language  and  Microsoft’s  JScript  derivative  allows  users  with  experi- 
ence in  scripting  to  add  interactivity  to  their  Web  pages,  verify  form 
input,  enhance  their  visual  displays,  and  dynamically  control  the 
browser.  Interactive  features  of  JavaScript  include,  scrolling  title  bars, 
flashing  buttons,  and  hit  counters. 

Adobe  GoLive  comes  with  an  integrated  Script  Editor  that  lets  you 
build  scripts  directly  within  the  application,  embed  them  in  your 
page,  and  test  them  immediately  by  launching  the  targeted  browser. 

In  addition,  Adobe  GoLive  provides  a complete  inventory  of  script 
building  blocks  for  all  major  JavaScript  dialects  and  versions.  When- 
ever you  insert  a script  placeholder,  the  Script  Inspector  lets  you 
choose  the  targeted  application  and  configures  the  Script  Editor  ac- 
cordingly. In  connection  with  JavaScript’s  capability  to  identify 
browsers,  this  feature  makes  it  easy  for  experienced  programmers  to 
build  pages  with  multiplatform  support. 


A 


Not  all  browsers  implement  JavaScript  in  the  same  way.  Test  all 
JavaScripts  on  all  of  your  target  browsers. 
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JavaScript  Versus  Java 


JavaScript  Information 
Resources 


Inserting  JavaScript 
Placeholders  _*  J 

Inserting  a JavaScript  Placeholder 


Building  Web  Pages 


As  opposed  to  the  Java  programming  language  developed  by  Sun  Mi- 
crosystems, JavaScript  is  a scripting  language.  Java  allows  program- 
mers to  write  small  standalone  applications  that  are  translated  to 
machine  code.The  server  stores  Java  applets  as  separate  binary  files 
and  serves  them  to  the  browser  for  running.  JavaScripts  are  small 
fragments  of  text  that  are  directly  embedded  in  your  HTML  code. 
When  the  browser  encounters  a script  in  a Web  page,  it  interprets  the 
script  commands  and  responds  accordingly — for  example,  by 
prompting  the  user  for  input. 


Because  a detailed  discussion  of  JavaScript  is  beyond  the  scope  of 
this  manual,  please  refer  to  the  information  resources  listed  below 
to  learn  more  about  this  universal  scripting  language  for  the  Web. 

For  a complete  introduction  to  JavaScript,  we  recommend  the  fol- 
lowing book  and  its  companion  Web  site: 

Dori  Smith  and  Tom  Negrino:  JavaScript  for  the  World  Wide  Web, 
Visual  Quickstart  Guide,  2nd  ed.;  published  by  Peachpit  Press 

Companion  site:  http://www.chalcedony.com/JavaScript/ 

The  following  Web  site  provides  the  best  on-line  introduction  to 
JavaScript: 

h ttp:/ /www.  cnet.  com /Con  ten  t/Builder/Programm  ing/Ja  va  Script/ 


To  insert  a JavaScript  placeholder,  drag  the  “Java  bean  with  Script” 
icon  from  the  Palette  onto  your  document  window. 
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Inserting  a 
JavaScript  into  the 
Head  Section 


To  insert  a JavaScript  into  the  head  section  of  the  page,  click  the 
JavaScript  button  at  the  top  of  the  document  window.  This 
brings  up  the  JavaScript  editor  (see  The  JavaScript  Editor  on 
page  188). 


Setting  Up  a JavaScript 


The  context-sensitive  Inspector  window,  now  titled  Body  Script  In- 
spector or  Head  Script  Inspector,  enables  you  to  select  the  desired 
JavaScript  version  ordialect  by  browser  nameand  open  tbeScript  Ed- 
itor window. 

To  set  up  a JavaScript,  proceed  as  follows: 

1 Select  the  JavaScript  icon  in  the  document  window.  This  opens 
the  Body  Script  Inspector  in  the  Inspector  window.  If  you  click  the 
JavaScript  button  at  the  top  of  the  document  window,  the 
HeadScript  Inspector  is  selected  automatically  if  the  Inspector 
window  is  open. 

2 Type  a descriptive  name  into  the  Name  text  box.  This  name  will 
appear  in  the  Scripts  menu  of  the  JavaScript  Editor. 


This  checkbox  converts 
the  path  to  the  referenced 
script  file  to  an  absolute 
path.  This  option  is  dis- 
cussed in  the  section  Set- 
ting Up  Adobe  GoLive  to 
Use  Absolute  Paths  on 
page  719  in  Chapter  17, 
Managing  Web  Sites  with 
Adobe  GoLive. 


Navigator  2.x 
Navigator  5.x 


• Communicator 


Explorer  3.x 
_Ex£lorer^x_ 


3 


3 Select  a target  browser  from  the  Language  popup  menu  to  deter- 
mine the  JavaScript  version  or  dialect: 

- Netscape  2.x  selects  JavaScript  (the  original  JavaScript  lan- 
guage). 

- Netscape  3.x  selects  JavaScript  7. 7. 

- Communicator  selects  JavaScript  t.2. 
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- Explorer  3.x  selects  JScript. 

- Explorer  4.x  a I so  se  I ects  JScript. 

4 The  selected  version  or  dialect  appears  in  the  text  box  below  the 
Language  popup  menu. 

5 You  can  either  reference  an  existing  script  in  your  site  or  on  your 
hard  disk  or  build  your  own  scripts. 

- To  reference  an  existing  script,  type  in  a resource  locator  for 
the  script  file  you  want  to  reference  in  the  Source  text  box, 
click  Browse  to  select  a script,  or  click  the  Point  & Shoot  but- 
ton to  link  to  a script  in  the  Site  Window. 

- To  build  your  own  script,  type  a name  in  the  Name  text  box 
and  click  the  Edit  button  to  open  the  Script  Editor  window. 
The  name  you  type  in  here  will  appear  in  the  Scripts  field  of 
the  JavaScript  editor. 


The  JavaScript  Editor  Here  is  theJavaScriptSc/'/pf /fd/forwindowthatappearsafter  clicking 

the  Edit  button  in  the  Body  (or  Head)  Script  Inspector.  The  JavaScript 
Editor  offers  the  typical  functionality  of  Adobe  GoLive's  built-in  text 
editors,  such  as  syntax  checking  and  highlighting,  wrap  control,  line 
numbering,  etc.  For  a detailed  description  of  these  functions  please 
refer  to  page  532  in  Chapter  13,  Using  the  Source  Editor. 

The  JavaScript  Editor 

These  buttons  let  you  control  syntax  checking, 
syntax  highlighting,  and  text  wrapping,  turn  line 
numbers  on  and  off,  as  well  as  add  and  delete 
scripts. 

The  script  code  appears  in  the  main  window  area. 


This  popup  menu  lists  all  existing  scripts  in  the 
current  Web  page. 
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The  JavaScript  Inspector 


JavaScript  Editor  Buttons 

The  triangle  control  and  the  seven  buttons  provide  convenient  short- 
cuts for  often-used  commands: 


Button  Function 

>The  triangle  control  opens  and  closes  the  error  log  section  of  the  JavaScript  Editor 
window.  It  opens  automatically  when  the  built-in  syntax  checker  detects  faulty 
script  code. 


This  button  launches  syntax  checking,  which  highlights  errors  and  incomplete 
script  elements  as  it  verifies  the  script  line  by  line.  For  more  details  on  syntax 
checking,  please  refer  to  the  section  Syntax  Checking  on  page  533,  in  Chapter  13, 
Using  the  Source  Editor. 


When  enabled,  this  button  and  the  error  counter  next  to  it  show  the  number  of 
syntax  errors  in  the  script. 


E" 


When  enabled,  this  button  and  the  error  counter  next  to  it  show  the  number  of  link 
warnings  in  the  script. 


This  button  toggles  syntax  highlighting  on  and  off  (“on”  state  shown).  Settings 
made  in  the  Preferences  dialog  box  control  the  default  appearance  [see Syntax 
Highlighting  Preferences  on  page  194). 


This  button  toggles  the  wrapping  of  the  JavaScript  code  at  the  margin  of  the  doc- 
ument window  on  and  off 


This  button  toggles  the  display  of  line  numbers  on  and  off. 


This  button  creates  a script  in  the  head  section  of  the  page,  adding  a new  entry  to 
the  scripts  menu. 


This  button  deletes  the  script  displayed  in  the  scripts  menu. 


The  JavaScript  Editor  (see  page  188)  has  a companion  JavaScript  In- 
spectorial holds  all  the  tools  you  need  to  write  JavaScripts.  This  In- 
spector has  three  tabs: 

The  Script  Tab 

The  Script  tab  of  the  JavaScript  Inspector  is  the  location  where  you 
name  scripts,  select  a JavaScript  dialect,  and  reference  an  external 
JavaScript  file. 
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The  Script  Tab  of  the  JavaScript  Inspector 


This  list  lets  you  navigate  to  the  function  declara- 
tions in  the  current  script. 


The  Events  Tab  of  the  JavaScript  Inspector 


You  can  drag  & drop  to  insert  events  into  your 
script. 


The  Functions  list  box  at  the  bottom  of  the  tab  is  a navigation  aid  for 
complex  scripts.  It  lists  all  function  declarations  existing  in  the  cur- 
rent script.  By  clicking  a declaration  in  the  list  box,  you  navigate  di- 
rectly to  the  location  in  the  script  where  the  function  has  been 
declared. 

The  Events  Tab  of  the  JavaScript  Inspector 

The  Events  tab  of  the  JavaScript  Inspector  lists  the  objects  that  can 
have  events  attached  and  the  events  they  support. 


You  can  create  event  definitions  by  dragging  items  from  the  Events 
tab  and  dropping  them  onto  the  main  window  area  of  W\e JavaScript 
Editor. 


JavaScript 
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The  Objects  Tab  of  the  JavaScript  Inspector 


The  Objects  tab  of  the  JavaScript  Inspector  holds  the  complete  inven- 
tory of  JavaScript  objects  and  methods  that  are  supported  by  the  cur- 
rently selected  JavaScript  dialog. 


The  Objects  Tab  of  the  JavaScript 
Inspector 


You  can  drag  & drop  to  insert  objects  into  your 
script. 


As  is  the  case  with  events,  you  can  also  use  drag  & drop  to  insert  ob- 
jects into  your  script. 


Adding  Code  to 
a JavaScript 


To  add  the  actual  JavaScript  code,  proceed  as  follows: 

1 Double-click  the  JavaScript  icon  in  the  document  window  or  click 
the  Edit  button  i n the  Body  Script  Inspector  (or  Head  Script  Inspec- 
tor if  the  script  is  embedded  in  the  head  section)  to  open  the 
JavaScript  Editor-  if  it  hasn’t  been  opened  already  (see  page  188). 

2 For  example,  drag  a default  event  from  the  Events  tab  of  the 
JavaScript  Inspector  (page  189)  onto  the  main  window  area  of  the 
JavaScript  Editor. 

3 Drag  & drop  to  add  a definition  from  the  Objects  tab  and  edit  the 
function  argument,  or  type  in  a definition.  The  newly  defined 
function  will  appear  in  the  Functions  list  in  the  Script  tab  of  the 
JavaScript  Inspector. 

4 Close  the  JavaScript  Editor  window  and  save  your  work. 

5 Click  the  Browser  Launcher  in  the  Toolbar  (see  page  563)  to  open 
the  targeted  browser  for  previewing  and  testing. 


Please  note  that  you  cannot  preview  the  effects  of  a JavaScript 
script  in  Adobe  GoLive’s  Preview  mode. 
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Basic  JavaScript  Examples 

Example  Script 


Using  Text  Macros 


The  following  screenshots  show  a small  example  script  and  the  re- 
sulting screen  display  that  the  browser  produces. 


□ : 


currtime.html 


as 


> am.  m°  ohqid  nsum  i 


document,  uir  i te<"<h1>Vour  Local  Time</h1>"|>; 
currtime  = newDateO; 

document.wri te<" I t is  currently  ”+currtime  + "where  you  live.") 


Your  Local  Time 


It  is  currently  Sat  Feb  21  16: 14:03  1 998  where  you  live. 


The  example  script  is  based  on  two  basic  methods: 

• The  document.writeO  method  on  the  “Your  Local  Time”  line 
writes  an  Hi-formatted  text  string  from  the  document  to  the 
screen  of  the  browser. 

• currtime  defines  a variable  and  sets  its  value  to  newDate(),  which 
gets  the  long  version  of  the  current  date  from  the  visitor’s  oper- 
ating system. 

• The  last  line  is  again  output  to  the  browser’s  screen  using  a doc- 
ument.writeO method,  with  the  embedded  currtime  variable  set 
to  the  current  time  and  date. 


Text  macros  are  a power  tool  designed  for  regular  users  of  the 
JavaScript  Editor.  They  enable  Web  authors  to  automate  the  insertion 
of  frequently  used  syntax  elements,  doing  away  with  the  need  to 
hand-code  (or  copy  and  paste)  lengthy  stri ngs  of  scri pt  code  over  and 
over  again. 

For  a detailed  description  and  instructions  on  using  text  macros, 
please  refer  to  the  section  Using  Text  Macros  with  Source  Code  Editors 
on  page  535  in  Chapter  13,  Using  the  Source  Editor. 


JavaScript 
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JavaScript  Preferences 


The  JavaScript,  Colors,  Font  and  Printing  tabs  in  the  Preferences  - 
JavaScript  group  of  options  let  you  customize  various  basic  settings 
that  influence  the  behavior,  and  appearance  of  the  Script  Editor  and 
scripts  displayed  in  Source  mode. 

To  open  the  JavaScript  group  in  the  Preferences  dialog  box,  proceed 
as  follows: 

1 Go  to  the  Edit  menu  and  choose  Preferences. 

2 Locate  and  click  the  JavaScript  icon  on  the  scrolling  sidebar. 

3 Click  the  triangle  control  to  expand  the  JavaScript  options. 

4 Click  the  JavaScript,  Colors,  Fonts,  or  Printing  item  to  view  the  de- 
sired dialog  box. 


Setting  General  JavaScript  Preferences 

The  settings  made  in  the  first-level  JavaScript  dialog  box  let  you  en- 
able or  disable  drag  & drop  support  and  control  the  way  JavaScript 
code  appears  in  the  main  window  area  of  the  JavaScript  editor. 


The  Preferences  - JavaScript  Dialog  Box 


Use  this  checkbox  to  toggle  drag  & drop  on 
and  off. 

Use  this  checkbox  to  toggle  the  automatic  inden- 
tation of  lower-level  elements  on  and  off. 

Use  this  checkbox  to  toggle  the  display  of  line 
numbers  on  and  off. 

Check  this  option  to  let  the  JavaScript  code  wrap 
at  the  margin  of  the  script  editor  window. 

Use  this  text  box  to  specify  the  indentation  (in 
characters)  created  by  the  tab  key. 


Click  the  JavaScript  icon  to  open  the  JavaScript 
preferences. 


Preview  your  settings  here. 


J 


The  JavaScript  dialog  box  contains  the  following  options: 

• The  Enable  dragging  of  marked  text  checkbox  toggles  the  internal 
drag  & drop  support  on  and  off. 

• The/\ufo  Indent  checkbox  toggles  the  automatic  indenting  of 
lower  level  script  elements  on  and  off. 


194 


Building  Web  Pages 


CHAPTER  4 


• The  Tab  Size  text  box  sets  the  width  of  the  indentation  (in  char- 
acters) added  when  you  press  the  tab  key. 

• Selecting  the  Line  numbers  option  displays  line  numbers  at  the 
left  margin  of  the  JavaScript  editor  window. 

• Selecting  the  Soft  wrap  option  lets  the  JavaScript  code  wrap  in 
tbeJavaScript  Editor  window  when  it  reaches  the  right  margin  of 
the  window. 

• The  preview  pane  at  the  bottom  of  the  dialog  box  lets  you  see 
the  effect  of  your  settings  instantly. 


Syntax  Highlighting  Preferences 


The  settings  in  the  Colors  dialog  box  control  the  way  the  individual 
JavaScript  code  elements  appear  in  the  JavaScript  editor  window 
when  the  user  enables  syntax  highlighting. 


Customizing  Syntax  Highlighting 


Use  this  checkbox  to  turn  syntax  highlighting 
on  and  off. 

Click  any  color  field  to  assign  a new  screen  color 
to  the  code  element  of  your  choice. 


The  Colors  dialog  box  contains  the  following  options: 

• The  Enable  Syntax  Highlighting  checkbox  toggles  syntax  high- 
lighting on  and  off.  This  checkbox  determines  the  default 
appearance  of  the  code  that  the  user  sees  when  opening  the 
JavaScript  editor.  Click  the  syntax  highlighting  on/off  button  to 
override  it  (see  page  189). 

• The  color  fields  below  the  checkbox  show  the  default  colors 
used  for  syntax  highlighting  and  let  you  select  a custom  color  for 
a JavaScript  code  element  of  your  choice.  Clicking  a field  opens 
the  Apple  color  wheel  to  let  you  pick  a screen  color. 


JavaScript 
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Font  Preferences 

The  Font  dialog  box  controls  the  default  font  that  displays  JavaScript 
code  in  the  editor  window. 


Selecting  a Custom  Font 


Use  these  options  to  select  a custom  font 
and  style  for  JavaScript  code  displayed  in  the 
editor  window. 


Preview  your  font  preferences  here. 


You  can  select  a custom  font,  font  size,  and  style  for  JavaScript  code 
to  override  the  default  Monaco  9 pt  plain  setting. 


Printing  Preferences 

The  Printing  dialog  box  controls  the  default  formatting  options  used 
in  hardcopy  printouts  of  the  JavaScript  code. 


Selecting  Printing  Options 


Use  these  options  to  override  the  default  settings  . 
for  hardcopy  printouts. 


Use  these  options  to  select  a custom  font  and 
style  for  JavaScript  code  printed  in  hardcopy. 


Preferences 


ColorSync1" 
□ LiveObjects 
> Site 


B Browsers 
Find 

^ @ Spell  Checking 
0 Plugins 
^ Network 
l>  ^3  Source 


— 0 Printer  specific  settings 
0 Syntax  Highlighting 
0 Bold  Typeface  for  Tags 
0 Line  Numbers 


0 Use  special  font  for  printing 


| Cancel  | [|  OK  Yl 


The  Printing  dialog  box  contains  the  following  options: 

• The  Printer  specific  settings  section  lets  you  format  the  hardcopy 
printout  by  adding  the  color  attributes  used  for  syntax  highlight- 
ing (only  useful  on  a color  printer),  use  bold  typeface  for  HTML 
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tags  to  make  them  stand  out,  and  add  line  numbers  to  make 
individual  lines  of  code  easier  to  refer  to.  If  you  don’t  use  these 
options  to  override  the  default  font  styles,  the  printout  will  be 
formatted  according  to  the  screen  display  preferences. 

• The  Use  special  font  for  printing  section  lets  you  apply  a custom 
font  and  style  options  to  hardcopy  printing. 


Java  Applets  Adobe  GoLive  lets  you  insert  Java  applets  on  a layout  grid  or  into  the 

flow  of  HTML  code,  so  you  can  add  animation  or  other  advanced  fea- 
tures to  your  page.  Once  you  insert  them,  you  can  play  Java  applets 
from  within  Adobe  GoLive.  This  eliminates  the  need  to  launch  a 
browser  for  previewing. 


Inserting  a Java 
Applet  Placeholder 


To  insert  a Java  applet  placeholder,  drag  the  “bean”  Java  applet  icon 
from  the  Palette  onto  your  layout  grid  or  document  window. 


Inserting  a Java  Applet  Placeholder 


The  question  mark  symbol  indicates  that  the 
placeholder  has  not  been  linked  with  an  applet 
yet. 


E) 

Drag  the  “Java 
bean " icon  from 

the  Palette  onto 
your  document 
window  to  insert  a 
Java  applet  place- 
holder. 

Java™ 

The  applet  name  appears  in 
the  placeholder  symbol  to  in- 
dicate that  the  applet  is  prop- 
erly linked  and  ready  to  play. 


NervousText 


Java™ 


Selecting  a Java  Applet 


The  context-sensitive  Inspector  window,  now  titled  Java  Applet  In- 
spector, lets  you  select  and  set  up  your  Java  applet. 

To  link  the  placeholder  with  a Java  applet,  proceed  as  follows: 

1 Select  the  Java  applet  placeholder  in  the  document  window.  This 
opens  the  Basle  tab  of  the  Java  Applet  Inspector. 

2 Click  the  Browse  button  in  the  Java  Applet  Inspector  window. 
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3 In  the  subsequent  file  selection  dialog,  locate  the  desired  applet 
file  by  its  .class  extension  and  click  OK.  The  name  of  the  code 
base  — that  is,  the  file  containing  the  applet  code — appears  in 
the  Code  field  below  the  Browse  button. 


Please  note  that  with  some  Java  applet  generator  programs 
th e.class  extension  isn’t  added  properly  to  the  CODE  attribute. 
These  applets  work  without  any  problems  in  the  browser  but 
they  won’t  display  in  Adobe  GoLive. 


4 In  the  Java  applet  placeholder,  the  name  of  the  applet  should  re- 
place the  question  mark  symbol  (see  preceding  illustration). 

For  an  alternative  way  of  selecting  applets,  see  page  200. 


Setting  Up  a Java  Applet  After  linking  the  Java  applet  placeholder  with  an  applet  file  and  plac- 
ing it  at  the  desired  location,  you  can  resize  it  and  proceed  to  adjust 
its  display  properties. 

You  can  set  up  an  applet  using  the  options  on  the  Basic,  Parameters, 
and  Alternatives  tabs  of  the  Java  Applet  Inspector. 


The  Basic  Tab  of  the  Java  Applet  Inspector 

Click  other  tabs  to  view  more  options. 

The  location  of  the  code  base  file  appears  here. 
Click  Browse  to  select  a Java  applet  or  the  Point 
& Shoot  button  to  link  to  one. 

The  file  name  of  the  code  base  appears  here. 

Use  these  options  to  adjust  geometry. 


□ Java  Applet  Inspector 

Basic  ^ Parhams  Userdef  Alt  ^ 


{ 


../FS586T-Folder/gonet/NewsletterS320F 


fp  Absolute  | Brovse..  j 


NervousText.java 


Vidth 

1 89 

HCesl 

A) 

HSpace 

Height 

1 38 

JGE*I 

VSpace 

Align 

( Default 

A} 

| Nervous  Text] 


This  checkbox  converts  the  path 
to  the  referenced  applet  file  to  an 
absolute  path.  This  option  is  dis- 
cussed in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe 
GoLive. 


Click  here  to  name  the  applet. 
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Resizing  Applets 


To  adjust  the  size  of  the  applet  directly  in  the  document  window, 
proceed  as  follows: 

1 In  the  document  window,  click  to  select  the  applet  placeholder 
and  display  the  sizing  handles  at  the  far  right,  lower  right  corner, 
and  lower  middle. 

2 Click  the  right  handle  to  resize  the  width,  the  lower  middle  han- 
dle to  resize  the  height,  or  the  one  at  the  lower  right  corner  to  re- 
size the  width  and  height  at  the  same  time. 


Resizing  a Java  Applet  Placeholder 


Click  a handle  and  drag  to  resize. 


Alternatively,  you  can  adjust  the  size  of  the  applet  precisely  using  the 
Java  Applet  Inspector. 

1 Place  the  cursor  in  the  Height  text  box,  enter  the  desired  overall 
height  in  pixels,  and  press  the  Return  key  to  confirm  your  entry. 

- The  Pixel  option  lets  you  enter  the  height  precisely  in  pixels. 
(Because  only  the  Pixel  option  is  available,  the  popup  menu 
next  to  the  text  is  disabled.) 

2 Place  the  cursor  in  the  Width  text  box,  enter  the  desired  overall 
width  in  pixels,  and  press  the  Return  key  to  confirm  your  entry. 

- The  Pixel  option  lets  you  enter  the  width  precisely  in  pixels. 
(Because  only  the  Pixel  option  is  available,  the  popup  menu 
next  to  the  text  is  disabled.) 


Adjusting  Vertical  and  Horizontal  Spacing 


To  adjust  the  vertical  and  horizontal  spacing  between  the  applet  and 
surrounding  text,  proceed  as  follows: 

1 In  the  HSpace  text  box,  type  in  the  horizontal  spacing  in  pixels 
and  press  the  Return  key  to  confirm  your  entry. 

2 In  the  l /Space  text  box,  type  in  the  vertical  spacing  in  pixels  and 
press  the  Return  key  to  confirm  your  entry. 
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|»  Default  | 

Middle 

Bottom 

Left 

Right 

Texttop 

Absmiddle 

Baseline 

Absbottom 


You  can’t  use  the  vertical  and  horizontal  spacing  options  to  cre- 
ate extra  space  around  an  applet  placed  on  a layout  grid.  To 
change  the  intermediate  spacing  between  text  and  applets  on 
a layout  grid,  you  will  have  to  click  and  drag  the  text  frame  or 
applet. 

Adjusting  Applet  Alignment 

To  adjust  the  alignment  of  an  applet  that  was  directly  inserted  in  the 
flow  of  HTML  code  and  not  placed  on  a layout  grid,  proceed  as  fol- 
lows: 

To  align  the  applet  relative  to  text  on  the  same  line,  select  an  op- 
tion from  the  Alignment  popup  menu: 

- The  Default  option  aligns  the  applet  based  on  the  alignment 
settings  of  the  surrounding  text. 

- The  Top  option  aligns  surrounding  text  with  the  top  of  the  ap- 
plet. 

- The  Middle  option  horizontally  centers  the  baseline  of  sur- 
rounding text  with  the  applet. 

- The  Bottom  option  aligns  the  baseline  of  surrounding  text 
with  the  bottom  of  the  applet. 

- The  Left  option  aligns  the  applet  to  the  left  of  the  text. 

- The  Right  option  aligns  the  applet  to  the  right  of  the  text. 

- The  Texttop  option  aligns  the  applet  with  the  top  of  the  sur- 
rounding text. 

- The  Absmiddle  option  horizontally  aligns  the  absolute  center 
of  surrounding  text  with  the  applet. 

- The  Baseline  option  aligns  the  applet  with  the  baseline  of  the 
surrounding  text. 

- The  Absbottom  option  aligns  the  absolute  bottom  of  the  sur- 
rounding text  with  the  bottom  of  the  applet. 

You  can’t  align  an  applet  on  a layout  grid.  To  change  the  posi- 
tion on  a layout  grid,  you  can  select  and  drag  the  text  frame  or 
applet. 
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Naming  an  Applet 


To  give  the  applet  a name  that  identifies  it  as  a unique  object  on  your 
Web  page,  proceed  as  follows: 

In  the  Name  text  box,  type  in  a name  not  in  use  by  any  other  ob- 
ject on  your  page  and  press  the  Return  key  to  confirm  your  entry. 


Inserting  Java 
Applets  via 
Point  & Shoot 


Alternatively,  you  can  use  Adobe  GoLive’s  Point  & Shoot  feature  to 
link  a placeholder  with  the  applet  of  your  choice: 

1 Click  the  Point  & Shoot  button  in  the  Java  Applet  Inspector. 

2 Drag  to  the  desired  applet  in  the  Site  Window. 


Point  & Shoot  Linking  with 
an  Applet  File  in  the  Site  Window 


Click  the  Point  & Shoot  button... 


. . . and  drag  to  the  desired  applet  in  the  Site 
Window. 


Visual  feedback  indicates  that  Point  & Shoot  was  successful 


• The  interconnecting  line  blinks  twice. 

• The  file  name  and  directory  path  appear  in  the  Bose  text  box  of 
the  Java  Applet  Inspector. 
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You  need  to  import  your  page  and  media  files  into  the  Site  Win- 
dow to  use  this  feature,  since  you  can  only  Point  & Shoot  at  an 
icon  in  the  Site  Window.  (For  more  details  on  site  management, 
see  Chapter  17,  Managing  Web  Sites  with  Adobe  GoLive.) 


Using  Java  Applets  as 
HTML  Containers 


Java  Applet  Placeholder  with 
Alternative  HTML  Content 


Instead  of  the  Java  bean  icon  and  applet  name, 
this  Java  applet  placeholder  displays  a warning 
message  to  the  audience,  enclosed  in  two  HTML 
line  tags. 


Adobe  GoLive  lets  you  enter  alternative  text  or  HTML  objects  in  the 
Java  applet  placeholder.  The  browser  displays  alternative  text  if  the 
applet  tag  is  understood  but  applet  loading  is  disabled;  the  HTML  ap- 
pears when  Java  is  not  supported.  By  adding  images  or  other  HTML 
objects,  you  can  edit  or  enrich  the  text  or  HTML  content  of  the  Java 
applet. 


Sony,  you  need 
a Java-sawy 
browser  to  load 
Java  applets ! 

To  display  alternative  text  or  HTML  within  the  Java  applet  place- 
holder, proceed  as  follows: 

1 Selectthejava  applet  placeholder  in  the  main  document  window 
to  open  the  Java  Applet  Inspector. 

2 In  the  Java  Applet  Inspector,  click  the  Alt  tab  to  enter  alternative 
text. 


Enabling  Alternative  Text  Within  the 
Java  Applet  Placeholder 

Click  here  and  type  in  a value  for  the  alternative 
HTML 


Select  this  checkbox  to  activate  the  alternative 
text  display  within  the  Java  applet  placeholder. 


3 Check  the  Show  alternative  HTML  checkbox  to  enable  the  display 
of  alternative  HTML  in  the  Java  applet  placeholder. 

4 In  the  Alt  Text  text  field,  type  in  a value  for  the  alternative  HTML. 
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5 Return  to  the  main  document  window  and  insert  the  text  or 
HTML  you  want  the  audience  to  see  when  their  browsers  don’t 
support  Java  applets. 

6 Drag  & drop  an  icon  from  the  Palette  into  the  applet  placeholder 
or  place  the  cursor  in  the  applet  placeholder  and  double-click  an 
icon  in  the  Palette.  You  can  display  any  valid  HTML  item  in  the 
applet  placeholder — for  example,  text,  images,  or  horizontal 
lines. 


Plugins  Adobe  GoLive  supports  a variety  of  plugins  that  enable  browsers  to 

play  back  multimedia  over  the  Web,  allowing  you  to  place  video  and / 
or  audio  clips  on  your  page. 

You  can  place  any  multimedia  element  that  Netscape  Navigator  or 
Microsoft  Internet  Explorer  support  into  your  layout  grid  or  flow  of 
HTML  code,  including  Apple’s  QuickTime,  QuickTime  VR  Compo- 
nents, and  Macromedia  Flash  and  Shockwave  plugins. 

Within  Adobe  GoLive,  you  can  preview  supported  media  clips. 


Inserting  a 
Plugin  Placeholder 


To  insert  a plugin  placeholder,  drag  the  Plugin  icon  from  the  Palette 
onto  your  layout  grid  or  document  window. 


When  the  name  of  the  media 
object  appears  in  the  place- 
holder symbol,  this  indicates 
that  the  media  file  is  properly 
linked  and  ready  to  play. 
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Selecting  a Media  File 


The  context-sensitive  Inspector  window,  now  titled  Plugin  Inspector, 

lets  you  select  and  set  up  your  multimedia  object. 

To  link  the  placeholder  with  a media  file,  proceed  as  follows: 

1 Select  the  plugin  placeholder  in  the  document  window.  This 
opens  the  Basic  tab  of  the  Plugin  Inspector. 

2 Click  the  Browse  button  in  the  Plugin  Inspector  window. 

3 In  the  subsequent  file  selection  dialog,  locate  the  desired  media 
file  and  click  OK. 

4 Inthe  plugin  placeholder, the  nameofthe  media  filewill  replace 
the  question  mark  symbol  (see  illustration  above). 


A special  note  on  QuickTime  movies:  You  can’t  use  standard 
QuickTime  movies  as  they  come.  You  need  to  flatten  them — 
that  is,  convert  them  to  a “Web-compatible”  sequential  format. 


To  flatten  a QuickTime  movie  for  use  on  the  Web,  proceed  as  follows: 

1 Load  the  movie  with  Apple’s  MoviePlayer. 

2 Open  the  Save  as...  dialog  box. 

3 Check  the  Playable  on  non-Apple  computers  checkbox.  (QT  2.5 
only). 

4 Save  the  movie  under  another  name  and  append  the.mov  exten- 
sion. 

For  more  details,  please  browse  Apple  Computer’s  QuickTime  Web 
page  at  http://quicktime.apple.com. 


Setting  Up  a plugin  After  linking  the  plugin  placeholder  with  a media  file  and  placing  it 

at  the  desired  location,  you  can  resize  it  and  adjust  its  display  prop- 
erties. 
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You  can  set  up  a media  file  using  the  options  on  the  Basic,  More,  At- 
tribs,  and  Special  tabs  of  the  Plugin  Inspector. 


The  Basic  Tab  of  the  Plugin  Inspector 


The  location  of  the  media  file  appears  here. 

Click  Browse  to  select  a media  file  or  the  Point 
& Shoot  button  to  link  to  one. 

Adobe  GoLive  automatically  identifies  the 
MIME  type  of  the  QuickTime  movie. 

The  name  of  the  media  player  application  and 
download  location  appears  here. 


Use  these  options  to  adjust  geometry. 


Click  here  to  align  the  media  element. 


Click  here  to  play  back  the  media  file. 


I 


□ Plug-in  Inspector B 

Basic  ^ More  | Attribs  ) QuickTime  ^ 


H File  /Mac0S8/DesktopSS20Fdder  /Sites  /News 


Absolute  Brovse... 


Q Mime  j video  /quicktime 


Player 
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QuickTime  Plugin 
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This  checkbox  converts 
the  path  to  the  referenced 
plugin  media  file  to  an 
absolute  path. 

This  option  is  discussed  in 
the  section  Setting  Up 
Adobe  GoLive  to  Use 
Absolute  Paths  on 
page  719  in  Chapter  17, 
Managing  Web  Sites  with 
Adobe  GoLive. 


A warning  on  playing  back  plugins:  Although  Adobe  has  gone 
out  of  its  way  to  test  all  third-party  plugins  and  media  exten- 
sions currently  available,  no  warranty  is  granted,  either  im- 
plied or  expressed,  that  plugins  play  properly  when  embedded 
in  your  Web  pages.  Be  aware  that  poorly  programmed  plugins 
may  produce  crashes  and  even  damage  your  files,  so  take  all 
necessary  precautions  when  testing. 


Resizing  Plugins 


To  adjust  the  size  of  the  plugin  directly  in  the  document  window, 
proceed  as  follows: 

1 In  the  document  window,  click  to  select  the  plugin  placeholder 
and  display  the  sizing  handles  at  the  far  right,  lower  right  corner, 
and  lower  middle. 

2 Click  the  right  handle  to  resize  the  width,  the  lower  middle  han- 
dle to  resize  the  height,  or  the  one  at  the  lower  right  comer  to  re- 
size the  width  and  height  at  the  same  time. 
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Resizing  a Plugin  Placeholder 


Click  a handle  and  drag  to  resize. 


Alternatively,  you  can  adjust  the  size  of  the  plugin  precisely  using  the 
Plugin  Inspector. 

1 Place  the  cursor  in  the  Height  text  box,  enter  the  desired  overall 
height  in  pixels,  and  press  the  Return  key  to  confirm  your  entry. 

2 You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Height  text  box: 

- The  Pixel  option  lets  you  enter  the  height  precisely  in  pixels. 
(Because  only  the  Pixel  option  is  available,  the  popup  menu 
next  to  the  text  is  disabled.) 

3 Place  the  cursor  in  the  Width  text  box,  enter  the  desired  overall 
width  in  pixels,  and  press  the  Return  key  to  confirm  your  entry. 

4 You  can  select  a measurement  option  from  the  popup  menu 
next  to  the  Width  text  box: 

- The  Pixel  option  lets  you  enter  the  height  precisely  in  pixels. 
(Because  only  the  Pixel  option  is  available,  the  popup  menu 
next  to  the  text  is  disabled.) 


Adjusting  Vertical  and  Horizontal  Spacing 


To  adjust  the  vertical  and  horizontal  spacing  between  the  plugin  and 
surrounding  text,  proceed  as  follows: 

1 In  the  HSpace  text  box,  type  in  the  horizontal  spacing  in  pixels 
and  press  the  Return  key  to  confirm  your  entry. 

2 In  the  VSpace  text  box,  type  in  the  vertical  spacing  in  pixels  and 
press  the  Return  key  to  confirm  your  entry. 


You  can’t  use  the  vertical  and  horizontal  spacing  options  to  cre- 
ate extra  space  around  a plugin  placed  on  a layout  grid.  To 
change  the  intermediate  spacing  between  text  and  plugins  on 
a layout  grid,  you  must  click  and  drag  the  text  frame  or  plugin. 
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Adjusting  Plugin  Alignment 


To  adjust  the  alignment  of  a plugin  that  was  directly  inserted  in  the 
flow  of  HTML  code  and  not  placed  on  a layout  grid,  proceed  as  fol- 
lows: 


Middle 

Bottom 

Left 

Right 

Texttop 

Absmiddle 

Baseline 

Absbottom 


To  align  the  plugin  relative  to  text  on  the  same  line,  select  an  op- 
tion from  the  Alignment  popup  menu: 

- The  Default  option  aligns  the  plugin  based  on  the  alignment 
settings  of  the  surrounding  text. 

- The  Top  option  aligns  surrounding  text  with  the  top  of  the 
plugin. 

- The  Middle  option  horizontally  centers  the  baseline  of  sur- 
rounding text  with  the  plugin. 

- The  Bottom  option  aligns  the  baseline  of  surrounding  text 
with  the  bottom  of  the  plugin. 

- The  Left  option  aligns  the  plugin  to  the  left  of  the  text. 

- The  Right  option  aligns  the  plugin  to  the  right  of  the  text. 

- The  Texttop  option  aligns  the  plugin  with  the  top  of  the  sur- 
rounding text. 

- The  Absmiddle  option  horizontally  aligns  the  absolute  center 
of  surrounding  text  with  the  plugin. 

- The  Baseline  option  aligns  the  plugin  with  the  baseline  of  the 
surrounding  text. 

- The  Absbottom  option  aligns  the  absolute  bottom  of  the  sur- 
rounding text  with  the  bottom  of  the  plugin. 


You  can’t  align  a plugin  on  a layout  grid.  To  change  the  position 
on  a layout  grid,  you  can  select  and  drag  the  text  frame  or  plu- 
gin. 


Naming  a Plugin 


To  give  the  plugin  a name  that  identifies  it  as  a unique  object  on 
your  Web  page,  proceed  as  follows: 

In  the  Name  text  box,  type  in  a name  not  in  use  by  any  other  ob- 
ject on  your  page.  Press  the  Return  key  to  confirm  your  entry. 
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Editing  Plugin  Attributes 

The  Attribs  tab  of  the  Plugin  InspectoraWows  you  to  add,  edit,  and  de- 
lete plugin  attributes  manually.  You  can  use  this  tab  to  edit  the  at- 
tributes of  media  extensions  that  Adobe  GoLive  does  not  directly 
support. 


TheAttribs  Tab  of  the  Plugin  Inspector 


View  the  attributes  in  the  list  box. 


□ Plug-in  Inspector  @ 

Basic  ^ More  f Attribs  j QuickTime 

Attribute  Value 

~~ 

. AutoPlay  true 

Controller  false 

Cache  true 

-A. 

▼ 

j 

“►“]  1 Delete  | [ New  J j-^ 

To  edit  the  attributes  of  your  plugin  manually,  proceed  as  follows: 

1 Click  the  New  button  to  add  a new  attribute.  (This  activates  the 
text  boxes  below  the  list  box.) 

2 Enter  an  attribute  name  in  the  left  text  box  and  press  the  Return 
key  to  confirm  your  entry.  The  attribute  name  will  appear  in  the 
Attribute  column  of  the  list  box. 

3 Enter  an  attribute  value  in  the  right  text  box  and  press  the  Return 
key  to  confirm  your  entry.  The  attribute  value  will  appear  in  the 
Value  column  of  the  list  box. 

4 To  delete  an  attribute,  select  the  desired  entry  from  the  list  box 
and  click  the  Delete  button. 
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Alternatively,  the  Special  tab  of  the  Plugin  Inspector  automatically 
changes  its  name  and  content  to  let  you  edit  the  attributes  of  plugins 
that  Adobe  GoLive  supports — for  example,  QuickTime  movies. 


The  Special  Tab  of  the  Plugin  Inspector 

Check  this  option  to  show  playback  controls. 

Check  this  option  to  enable  caching. 

Check  this  option  to  play  the  movie  automatically- 

Use  these  options  to  play  the  movie  in  an  endless 
loop.  (Palindrome  plays  back  and  forth.) 

Check  this  option  to  play  all  frames  of  the  movie.  - 
Use  these  options  to  reference  a plugin  file. 


Select  _self  to  let  the  poster  appear  in  the  movie  . 
window. 


□ Plug-in 
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Use  this  option  to  specify  back- 
ground color. 

Use  this  option  to  specify  an  audio 
volume. 


To  select  the  attributes  for  a plugin  that  Adobe  GoLive  supports  (ex- 
ample shows  QuickTime  movie),  proceed  as  follows: 

1 Check  or  uncheck  the  Show  Controller  checkbox  to  have  the 
browser  show  or  hide  the  playback  controls,  such  as  the  Play, 
Stop,  and  Rewind  buttons. 

2 Check  the  Cache  checkbox  to  enable  caching  through  the  browser 
when  playing  back  the  media  item. 

3 Check  the  Autoplay  checkbox  to  let  the  browser  automatically 
play  back  the  media  item  on  opening  the  page. 

4 Check  the  Loop  checkbox  to  have  the  browser  play  the  media 
item  in  an  endless  loop. 

5 Check  the  Palindrome  checkbox  to  have  the  browser  play  the  me- 
dia item  back  and  forth  in  an  endless  loop. 

6 Check  the  Play  every  frame  checkbox  to  have  the  browser  play  the 
media  item  without  omitting  any  frames. 

7 Check  the  Link  checkbox  and  type  in  a resource  locator  for  a post- 
er you  want  to  display  as  an  image  in  the  current  movie  window. 
Click  Browse,  or  use  the  Point  & Shoot  button  to  link  to  a resource 
in  the  Site  Window. 
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When  using  the  Link  checkbox,  select  the  self  option  to  ensure 
that  the  poster  appears  in  the  movie  window. 

If  desired,  type  in  a target  frame  in  the  destination  frame  set  or 
select  one  from  the  popup  menu. 


Plugin  Preferences  The  Plugins  optlonsln  the  Preferences  d\a\ogbox\etyou  assign  media 

file  types  to  the  plugins  currently  installed  in  the  Plugins  folder  with- 
in your  Adobe  GoLive  program  folder.  This  assignment  enables 
Adobe  GoLive  to  play  back  media  files  using  the  appropriate  resourc- 
es. 


Setting  Plugin  Preferences 


Click  this  icon  to  view  the  Plugins  preferences. 

The  program  selects  a suitable  plugin  from  this 
popup  menu. 

Click  here  to  remove  the  selected  media  file  to 
plugin  assignment. 

Click  New  to  create  a new  media  file  to  plugin  as- 
signment. 


[ Cancel  j f|  OK  l) 


To  assign  a new  media  file  type  to  a plugin,  proceed  as  follows: 

1 Click  New. 

2 Place  the  cursor  in  the  text  box  below  the  Mime  Type  column  and 
type  a media  category  and  a valid  MIME  type  (Multipurpose  In- 
ternet Mail  Extension — a file  type  identifier  for  files  sent  across 
the  Internet). 

3 When  Adobe  GoLive  has  the  appropriate  plugin,  it  recognizes  the 
MIME  type  and  assigns  the  proper  plugin  and  file  extension  auto- 
matically. 

If  there  is  no  equivalent  plugin  and  the  MIME  type  is  not  identi- 
fied, type  in  the  extension  as  well.  Adobe  GoLive  will  allow  you  to 
embed  this  type  of  media  file,  but  you  won’t  be  able  to  play  it 
back  in  the  Reference  Inspector. 


210 


Building  Web  Pages 


CHAPTER  4 


Custom  Interfaces  for 
Unknown  Plugins 


Adobe  GoLive  features  a customizable  interface  for  unknown  media 
items  that  enables  Web  masters  and  HTML  programmers  to  set  up 
new  pluginsand  Java  applets  without  havingto  usean  external  help- 
er application. 

Support  for  unknown  plugins  is  ensured  by  Adobe  GoLive’s  ability  to 
write  custom  plugin  definition  files  and  automatically  access  them 
whenever  a new  instance  of  that  plugin  is  created.  Once  you  config- 
ure unknown  media  items,  you  can  select  them  in  the  main  docu- 
ment window  and  inspect  them  using  the  Plugin  Inspector  or  Applet 
Inspector,  complete  with  their  attributes  and  default  values. 

To  define  an  unknown  plugin  or  Java  applet,  proceed  as  follows: 

1  In  Layout  mode,  drag  an  Unknown  (Start)  Tag  from  the  Palette 
and  drop  it  on  your  layout  grid  or  document  window. 


Inserting  an  Unknown  Tag 


<CS  .UD . INTERF  ACE  > 


Text 


2 In  the  Tag  Inspector,  type  in  CS.UD. INTERFACE  in  the  Tagname 
text  box  and  press  the  Return  key  to  initialize  the  plugin  defini- 
tion mode. 

3 Switch  from  Layout  to  Source  mode,  then  back  to  Layout. 

4 An  attribute  box  now  appears  in  the  Layout  window,  and  the 
Userdef  Inspector  appears  in  the  Inspector  window. 

5 In  the  Userdef  Inspector,  you  can  set  up  the  plugin  by  choosing 
the  appropriate  attribute  definitions. 

6 First,  from  the  Type  popup  menu,  choose  the  type  of  the  at- 
tribute to  be  defined.  This  menu  offers  five  options: 

Text  lets  you  define  an  attribute  with  any  desired  text  content, 
such  as  HEIGHT=L00. 

- Link  lets  you  define  a hyperlink  attribute. 

- Boolean  lets  you  define  an  attribute  with  two  logical  states, 
such  as  PLAY  = YES/NO. 
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The  Userdef  Inspector 


Enumeration  enables  you  to  define  an  enumeration — for  ex- 
ample, a selection  with  multiple  options,  such  as  ALIGN  = 
Default, Top, Middle, Bottom,  and  so  on. 

Color  lets  you  define  a color  attribute — COLOR="#OOBFFF"“, 
for  example. 


7 Select  the  Required  checkbox  if  you  are  defining  a new  attribute 
that  the  targeted  browser  needs  in  order  to  display  the  plugin,  or 
leave  it  deselected  if  it  is  an  optional  attribute. 

8 Type  the  name  in  the  Name  text  box. 

9 Type  a name  in  the  Vis.  Name  text  box.  This  name  will  appear  in 
the  document  window  to  identify  the  attribute  box. 

10  Type  the  title  in  the  Title  text  box. 

11  Type  an  initial  value  in  the  Init  Value  text  box.  Adobe  GoLive  will 
set  the  attribute  to  this  value  whenever  generating  a new  in- 
stance of  the  plugin. 

12  For  an  Enumeration  attribute  with  multiple  options,  type  in  a list 
of  options  in  the  Values  text  box,  using  commas  as  separators. 
(Don’t  use  any  intermediate  spaces!)  Example:  ALIGN  = 

Default,  Top,  Middle,  Bottom. 

If  the  enumeration  consists  of  Boolean  items,  you  must  enter  the 
TRUE  value  first.  Example:  yes, no. 

13  Type  in  one  or  more  descriptive  labels  in  the  Labels  text  box,  us- 
ing commas  as  separators.  Don’t  use  any  intermediate  spaces, 
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unless  you  enclose  the  list  in  straight  quotes.  Example:  7 
black",  “blue”,  “red”. 

14  In  the  Help  Text  text  box,  type  in  a descriptive  text. 

15  When  you  finish  defining  the  first  attribute,  Option-drag  the  at- 
tribute box  to  copy  it,  then  repeat  steps  6 through  14  as  required. 

16  Continue  repeating  attribute  definitions  until  you  have  covered 
all  necessary  attributes. 

17  Save  the  definition  file,  usingthe  same  file  nameasforthe  plugin 
or  Java  class,  but  append  .chasm  instead  of  the  standard  file 
name  extension. 

You  can  save  the  definition  file  in  three  locations: 

- in  the  same  folder  as  the  unknown  plugin  media  file  or  Java 
class 

- in  the  Modules  subfolder  in  the  Adobe  GoLive  program  folder 

- in  the  Plugins  subfolder  in  the  Adobe  GoLive  program  folder 

18  Insert  a plugin  or  applet  placeholder  and  link  it  with  the  media 
file  or  applet  you  have  defined. 

19  Adobe  GoLive  will  now  display  the  newly  defined  attributes  in  the 
Userdef  tab  of  the  Plugin  Inspector  or  Java  Applet  Inspector. 


Lloating  boxes  let  you  structure  your  page  into  rectangular  divisions 
that  you  can  format  individually,  fill  with  HTML  content,  and  stack. 
The  boxes  can  be  opaque  or  transparent  to  let  objects  in  the  back- 
ground shine  through.  They  are  based  on  the  DIV  tag,  which  has 
been  around  since  the  advent  of  HTML  3.2  but  only  hesitantly 
adopted  by  Web  authors  because  of  its  limited  scope.  The  upcoming 
HTML4.0  standard,  however,  will  substantially  enhance  the  DIV  tag’s 
functionality,  allowing  it  to  be  absolutely  positioned,  and  stacked  to 
accept  a background  image  or  background  color.  The  DIV  tag  is  also 
a core  element  of  Dynamic  HTML  (see  Chapter  5)  and  a major  build- 
ing block  for  absolute  positioning  with  Cascading  Style  Sheets  (see 
Chapter  6). 
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A Page  Head  Built  with  Floating  Boxes 


The  dark  box  has  a background  image  and  con- 
tains an  animated  GIF. 


These  are  transparent  boxes  with  colored  text, 
stacked  on  top  of  the  boxes  below. 


This  box  has  a yellow  background  and  contains 
normal  HTML  text. 


□ = earthinfloatbox.html  = 0 B 

Layout  |~T1)  l~H]~  Source  m)  _n  a)'  Preview  □ I El  I 

^ [5)  Welcome  to  Adobe  CyberStudio  IZl  [?^i 

4 -i- 

4 

Welcome  to  the  * 

4 

Mother  Earth  Web  Site  * 


. floating  through  time  and  space 


The  example  above  shows  four  floating  boxes  with  different  format- 
ting and  content.  The  dark  box  to  the  left  has  a “starry  night”  back- 
ground image  and  contains  an  animated  GIF  image  showing  a 
spinning  globe.  Placed  on  top  of  that  box  is  a transparent  floating 
box  with  colored  text.  The  bright  box  to  the  right  butts  against  the 
dark  box  with  the  spinning  globe.  Its  background  color  is  set  to  yel- 
low, and  it  contains  a first-level  header  (HI).  Stacked  on  top  of  that 
box  is  another  text  box  with  text  in  a different  color. 


To  display  without  flaws,  floating  boxes  require  a member  of 
the  4.0  generation  of  Web  browsers.  With  increasing  market 
penetration  of  the  new  Netscape  Communicator/Navigatorand 
Microsoft  Internet  Explorer  products,  however,  chances  are 
that  floating  boxes  will  soon  supplant  HTML  tables  as  a page 
layout  tool.  To  make  sure  that  you  don’t  exclude  the  greater 
part  of  your  audience  still  using  older  browsers,  we  recom- 
mend that  you  check  with  browser  usage  statistics  sources  on 
the  Web  to  see  if  using  floating  boxes  is  wise. 


Stacking-Related  Issues  There  are  a few  things  you  need  to  know  before  using  floating  boxes: 

• Stacking  capability:  The  layering  of  elements  is  one  of  the  most 
prominent  features  of  floating  boxes.  Floating  boxes  can  overlap 
or  even  be  placed  on  top  of  each  other.  The  stacking  order  is 
controlled  by  an  attribute  referred  to  as  the  z-index  (“z”  stems 
from  the  z-axis  in  a three-dimensional  coordinate  system), 
which  is  a simple  numeral.  Elements  with  a higher  z-index  dis- 
play on  top  of  elements  with  a lower  z-index.  For  example,  an 
element  having  a z-index  of  2 will  appear  to  float  above  another 
element  with  a z-index  of  1 . An  example  of  stacked  boxes 
appears  on  the  preceding  page. 
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By  default,  floating  boxes  are  superimposed  on  the  normal  flow 
of  HTML  and  Adobe  GoLive’s  layout  grid. 

• As  an  independent  division  within  the  page,  a floating  box 
accepts  any  other  HTML  tag-for  example,  an  image  or  simple 
HTML  text  with  formatting.  It  can  also  have  the  same  back- 
ground image  and  color  properties  as  an  HTML  page. 

The  following  sections  provide  instructions  for  using  floating  boxes. 


Inserting  a 
Floating  Box 


To  insert  a floating  box,  proceed  as  follows: 

1 In  Layout  mode,  drag  the  Floatbox  icon  from  the  Palette  and  drop 
it  anywhere  in  your  document  window  or  double-click  the  Float- 
box  icon  in  the  Palette. 


Inserting  a Floating  Box 


This  small  yellow  icon  is  the  marker  of  the  float- 
ing box.  When  you  change  the  position  of  the  box, 
it  remains  at  the  original  point  of  insertion. 


Resize  handles  let  you  click  and  drag  to  change 
the  size  of  the  floating  box. 


2 Note  the  small  yellow  icon  labeled  “SB”  in  the  upper  left  corner 
of  the  floating  box.  This  is  the  floating  box  marker.  When  you 
change  the  position  of  the  box,  it  remains  at  the  original  point  of 
insertion.  You  can  click  this  icon  to  select  the  floating  box  unless 
there  is  another  floating  box  on  top  of  it. 


Setting  Up  the 
Floating  Box 


To  set  up  the  floating  box  in  the  context-sensitive  Inspector  window, 
now  titled  Floating  Box  Inspector,  proceed  as  follows: 

1 Click  the  border  of  the  floating  box.  Resize  handles  will  indicate 
that  the  box  is  selected. 
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The  Floating  Box  Inspector 


Use  this  text  box  to  name  the  floating  box. 


Use  these  options  to  position  the  box  with  pixel- 
level  precision. 


Use  these  options  to  resize  the  box  with  pixel- 
level  precision. 


{ 

{ 


Use  these  options  to  activate  background  at- 
tributes. Click  the  color  field  to  open  the  Color 
Palette  and  select  a color,  or  select  an  image  us- 
ing the  Point  & Shoot  or  Browse  buttons. 


The  Animation  options  are  described  in  more  de- 
tail in  Chapter  5,  Dynamic  HTML. 


{ 

{ 


Stacked  Boxes  and  Their  Z-Indices 


The  lowest  box  has  a z-index  of  1 . 

The  box  in  the  middle  has  a z-index  of  2. 
The  box  at  the  top  has  a z-index  of  3. 


Use  this  text  box  to  enter  a z-index 
and  control  the  stacking  order. 


2 To  precisely  position  the  floating  box  on  the  page,  enter  the  de- 
sired coordinates  (in  pixels  from  the  upper  left  corner  of  the  doc- 
ument window)  in  the  Left  and  Top  text  boxes. 

Alternatively,  you  can  click  the  border  of  the  floating  box  and  drag  it 
to  a new  location. 

3 To  resize  the  floating  box,  enter  the  desired  size  in  the  Width  and 
Height  text  boxes. 

Alternatively,  you  can  click  any  resize  handle  and  drag. 

4 If  you  plan  to  add  more  overlapping  boxes,  enter  the  z-index  of 
the  floating  box  in  the  Depth  text  box  now.  Use  the  z-index  “1”  for 
the  lowest  box,  “2”  for  the  next  box  in  the  stack,  and  so  on. 

Assign  z-indices  whenever  you  place  overlapping  floating  boxes 
on  the  same  page  to  avoid  problems  when  the  browser  tries  to 
display  them. 


5  Select  a background  color  from  the  Color  Palette  (see  Chapter  77, 
The  Color  Palette,  starting  on  page  499,  for  reference).  This  will 
check  the  Color  checkbox  automatically. 
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Alternatively,  you  can  select  a background  image  by  clicking  the 
Browse  button  and  picking  an  image  in  the  subsequent  file  selection 
dialog  or  clicking  at  the  Point& Shoot  button  and  dragging  to  an  im- 
age file  in  the  Site  Window  (for  more  detail  on  the  Point  & Shoot  but- 
ton, see  Point  & Shoot  Insertion  of  Links  and  Anchors  on  page  1 76). 


Filling  a Floating  Box 
with  Content 


Floating  boxes  accept  any  valid  HTML  element,  including  text,  im- 
ages, rules,  and  any  other  basic  or  advanced  tags  from  the  Palette. 

You  can  also  format  text  and  assign  attributes  in  the  usual  way. 

To  add  text  to  a floating  box,  proceed  as  follows: 

1 Click  the  area  of  the  floating  box.  The  background  of  the  box 
turns  white  (if  you  have  not  selected  a background  color  or  im- 
age), and  the  blinking  text  cursor  appears. 

2 Start  typing. 

3 Select  text  and  apply  the  desired  formatting  using  the  buttons  in 
the  Text  Toolbar  or  text  formatting  commands  from  theSfy/eand 
Format  menus  (see  page  123  for  reference). 

To  add  HTML  tags  to  a floating  box,  proceed  as  follows: 

1 Drag  any  icon  from  the  Basic  Tags,  Forms,  Custom,  or  other  tab  of 
the  Palette  and  drop  it  on  the  floating  box. 

Alternatively,  click  the  area  of  the  floating  box  to  place  the  text  cu  rsor 

and  double-click  the  desired  item  in  the  Palette. 

2 Set  up  the  tag  as  desired-for  example,  by  Point  & Shoot  linking 
an  image  placeholder  with  an  image  file  in  the  Site  Window  (see 
Point  & Shoot  on  page  158). 


Note:  Netscape  Navigator  (up  to  at  least  version  4.05)  and  In- 
ternet Explorer  (up  to  at  least  version  4.01)  may  have  problems 
with  Floating  Boxes  that  contain  Tables  or  Layout  Grids. 


Internet  Explorer  Objects  in  the  Palette 
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Part  10 — Internet  Explorer-Specific  Tags 

Part  10  provides  instructions  for  using  tags  that  display  content  only 

when  viewed  with  Microsoft  Internet  Explorer: 

• The  section  ActiveX  Controls  describes  how  to  embed  ActiveX 
Controls,  a technology  developed  by  Microsoft  Corp.  for  creating 
interactive  Web  pages. 

• The  section  Scrolling  Marquee,  starting  on  page  224,  explains 
how  you  can  insert  and  set  up  a scrolling  marquee,  another  fea- 
ture that  only  Internet  Explorer  supports. 


Internet  Explorer 
Objects  in  the  Palette 


The  IE  Objects  in  the  Basic  Tags  Tab  oft 
the  Palette 


The  Palette  contains  two  Internet  Explorer-specific  objects  that  ap- 
pear in  the  Basic  Tags  tab: 

• ActiveX  Control 

• Scrolling  Marquee 
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Inserting  an  ActiveX  Control 


Adobe  GoLive  lets  you  insert  and  set  up  ActiveX  controls  when  the  IE 
Module  is  installed  in  the  Modules  folder  within  the  Adobe  GoLive 
program  folder.  ActiveX  is  Microsoft’s  proprietary  technology  for  cre- 
ating interactive  Web  pages  and  a subset  of  OLE  (Object  Linking  and 
Embedding).  It  brings  OLE-style  interaction  to  the  Web. 


13 


Unlike  Java  applets,  ActiveX  controls  are  not  platform-indepen- 
dent.  Currently,  they  are  mainly  supported  by  Microsoft  Win- 
dows environments.  You  cannot  play  them  back  in  Adobe 
GoLive — either  in  Preview  mode  or  in  the  Content  tab  of  the  File 
Inspector.  We  recommend  that  you  consult  Microsoft’s  Web  site 
for  more  detailed  information  on  ActiveX  technology. 


To  insert  an  ActiveX  control,  proceed  as  follows: 

1 Drag  the  ActiveX  icon  from  the  Palette. 

2 Drop  the  placeholder  on  a layout  grid  or  in  the  document  win- 
dow. 


Selecting  an  ActiveX  Control 


The  context-sensitive  Inspector  window,  now  titled  ActiveX  Inspector, 
lets  you  select  and  set  up  your  ActiveX  control. 

To  link  the  placeholder  with  an  ActiveX  control,  proceed  as  follows: 

1 Select  the  ActiveX  placeholder  in  the  document  window.  This 
opens  the  Basic  tab  of  the  ActiveX  Inspector. 

2 Click  the  Browse  button  in  the  ActiveX  Inspector  window. 
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3 In  the  following  file  selection  dialog,  locate  the  desired  code  base 
file  and  click  OK.  The  file  name  of  the  code  base,  that  is,  the  file 
containing  the  ActiveX  code  to  be  executed  at  runtime,  appears 
in  the  Base  field  at  the  top  of  the  Basic  tab. 


Alternatively,  you  can  select  an  ActiveX  code  base  file  by  click- 
ing at  the  Point  & Shoot  button  and  dragging  at  a file  in  the  Site 
Window.  This  requires  that  you  import  the  ActiveX  resource  into 
the  Site  Window  (see  Creating  a Site  by  Importing  Pages 
and  Resources  on  page  624). 


Drag  & drop:  You  can  drag  an  ActiveX  component  from  the 
Finder  and  drop  it  on  the  placeholder  to  import  it. 


Typing  the  file  name  and  directory  path  in  the  Base  text  field 
and  pressing  the  Return  key  is  another  possibility. 


4 In  the  ActiveX  control  placeholder,  the  question  mark  symbol 
should  disappear  now. 

After  linking  the  ActiveX  Control  placeholder  with  a code  base  file 
and  placing  it  at  the  desired  location,  you  can  set  up  the  ActiveX  con- 
trol using  the  options  on  the  Basic,  Special,  and  Attributes  tabs  of  the 
ActiveX  Inspector.  You  can  resize  it  and  adjust  its  display  properties 
and  application-specific  parameters. 


The  Basic  Tab  of  the  ActiveX  Inspector 

Click  this  tab  to  view  the  basic  options  for  the  Ac- 
tiveX control. 

Click  here  and  type  in  the  name  of  the  ActiveX 
code  base  file,  click  Browse  to  select  a file,  or  click 
to  Point  & Shoot. 


Use  these  options  to  control  the  geometry  of  the 
ActiveX  element. 


r~  Basic  ) Special  Attribute  ^ 


{ 


ActiveX  Inspector f| 


Vidth 


Base  I / ActiveX  /Clocki 


50 


Height  1 50 
Align  | Def 


Clock 


l~jl  Absolute  f Brovse.„j 


HSpace  |F 
VSpace 


H 


Border  2 


This  checkbox  converts  the  path 
to  the  referenced  ActiveX  control 
to  an  absolute  path.  This  option 
is  discussed  in  the  section  Set- 
ting Up  Adobe  GoLive  to  Use 
Absolute  Paths  on  page  719  in 
Chapter  17,  Managing  Web  Sites 
with  Adobe  GoLive. 


Click  here  and  type  in  a descriptive  name. 
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Adjusting  Display  Options  for  ActiveX  Controls 


Resizing  an  ActiveX  Placeholder 


Click  a handle  and  drag  to  resize. 


To  resize  an  ActiveX  control  directly  in  the  document  window,  pro- 
ceed as  follows: 

1 Click  to  select  the  placeholder  and  display  the  sizing  handles  at 
the  far  right,  lower  right  corner,  and  lower  middle. 

2 Click  the  right  handle  to  resize  the  width,  the  lower  middle  han- 
dle to  resize  the  height,  or  the  one  at  the  lower  right  corner  to  re- 
size the  width  and  height  simultaneously. 

To  view  the  ActiveX  component  icon  while  resizing,  Control-click 
the  handle  of  your  choice  and  drag. 

To  resize  the  ActiveX  component  proportionally,  Shift-click  the 
handle  at  the  lower  right  corner  and  drag. 


Alternatively,  you  can  adjust  the  size  of  the  ActiveX  control  precisely 
and  set  other  display  options  using  the  ActiveX  Inspector: 

1 Click  to  place  the  cursor  in  the  Width  text  box,  enter  the  desired 
overall  width  in  pixels,  and  press  the  Return  key  to  confirm  your 
entry. 

- The  Pixel  option  lets  you  enter  the  width  precisely  in  pixels. 

- The  Percent  option  is  disabled  for  ActiveX  controls. 

2 Click  to  place  the  cursor  in  the  Height  text  box,  enter  the  desired 
overall  height  in  pixels,  and  press  the  Return  key  to  confirm  your 
entry. 

- The  Pixel  option  lets  you  enter  the  height  precisely  in  pixels. 

- The  Percent  option  is  disabled  for  ActiveX  controls. 

3 In  the  HSpace  text  box,  type  in  the  horizontal  spacing  in  pixels 
and  press  the  Return  key  to  confirm  your  entry. 

4 In  the  l /Space  text  box,  type  in  the  vertical  spacing  in  pixels  and 
press  the  Return  key  to  confirm  your  entry. 

5 To  align  text  on  the  same  line  relative  to  the  ActiveX  control,  se- 
lect an  option  from  the  Align  popup  menu: 


Internet  Explorer-Specific  Tags 


221 


Bottom 

Left 

Right 

Texttop 

Absmiddle 

Baseline 

Absbottom 


6 


7 


- The  Default  option  aligns  the  ActiveX  control  based  on  the 
alignment  settings  of  the  surrounding  text. 

- The  Top  option  aligns  surrounding  text  with  the  top  of  the 
ActiveX  control. 

- The  Middle  option  horizontally  centers  the  baseline  of  sur- 
rounding text  with  the  ActiveX  control. 

- The  Bottom  option  aligns  the  baseline  of  surrounding  text 
with  the  bottom  of  the  ActiveX  control. 

- The  Left  option  aligns  the  ActiveX  control  to  the  left  of  the 
text. 

- The  Right  option  aligns  the  ActiveX  control  to  the  right  of  the 
text. 

- The  Texttop  option  aligns  the  ActiveX  control  with  the  top  of 
the  surrounding  text. 

- The  Absmiddle  option  horizontally  aligns  the  absolute  center 
of  surrounding  text  with  the  ActiveX  control. 

- The  Baseline  option  aligns  the  ActiveX  control  with  the  base- 
line of  the  surrounding  text. 

- The  Absbottom  option  aligns  the  absolute  bottom  of  the  sur- 
rounding text  with  the  bottom  of  the  placeholder. 

In  the  Border  text  box,  type  the  desired  width  of  the  border  in  pix- 
els and  press  the  Return  key  to  confirm  your  entry.  A colored  bor- 
der will  surround  the  ActiveX  placeholder. 

To  give  the  ActiveX  control  a name  that  identifies  it  as  a unique 
object  on  your  Web  page,  type  a descriptive  name  in  the  Name 
text  box  and  press  the  Return  key  to  confirm  your  entry.  The 
name  will  appear  in  the  ActiveX  placeholder  now. 
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Setting  Special  Properties 

The  Special  tab  of  the  ActiveX  Inspector  lets  you  edit  various  ActiveX- 
specific  properties,  such  as  resource  locations  and  link  type. 


The  Special  Tab  of  the  ActiveX  Inspector 

Click  this  tab  to  view  the  special  options  for  the 
ActiveX  control. 

Click  here  and  type  in  a resource  for  the  ActiveX 
control. 


Click  here  to  specify  the  way  the  data  is  handed 
over  to  the  target. 

Click  here  and  type  in  the  target  for  data  sent  by 
the  ActiveX  control. 


Click  here  and  type  in  a status  message. 


□ ActiveX  Inspector 

Basic  f | Special  ^ Attribute  ^ 

r 

—Data 

-Linktype  Q 

-Target  £ 

-Standby  Q 

To  edit  the  attributes  of  the  ActiveX  control,  proceed  as  follows: 

1 Place  the  cursor  in  the  Data  text  field  and  type  in  a resource  lo- 
cator for  a data  file  (or  any  other  valid  reference)  that  must  be  ac- 
cessible to  the  ActiveX  control  at  runtime. 

2 Put  the  cursor  in  the  LinkType  text  field  and  specify  the  link  you 
want  the  ActiveX  control  to  use  when  handing  over  data  to  its  tar- 
get. 

3 Place  the  cursor  in  the  Target  text  field  and  indicate  the  applica- 
tion or  other  entity  you  want  to  receive  data  from  the  ActiveX 
control. 

4 Place  the  cursor  in  the  Standby  text  field  and  type  in  a status  mes- 
sage you  want  displayed  while  the  ActiveX  control  is  loading. 
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Setting  ActiveX  Control  Attributes 

The  Attribute  tab  of  the  ActiveX  Inspector  lets  you  enter  and  edit 
ActiveX-specific  attributes  to  ensure  compatibility  with  future  releas- 
es of  Microsoft’s  scripting  tool  for  the  Web. 


The  Attribute  Tab  of  the  ActiveX  Inspector 

Click  this  tab  to  view  the  attributes  of  the  ActiveX 
control. 

View  the  attributes  in  the  list  box. 


Use  these  buttons  to  create,  delete,  duplicate, 
and  edit  attributes. 


To  edit  the  attributes  of  your  ActiveX  control,  proceed  as  follows: 

1 Click  the  New  button  to  add  a new  attribute.  (This  activates  the 
text  boxes  below  the  list  box.) 

2 Enter  an  attribute  name  in  the  left  text  box  and  press  the  Return 
key  to  confirm  your  entry.  The  attribute  name  will  appear  in  the 
Attribute  column  of  the  list  box. 

3 Enter  a default  attribute  value  in  the  right  text  box  and  press  the 
Return  key  to  confirm  your  entry.  The  attribute  value  will  appear 
in  the  Value  column  of  the  list  box. 


Alternatively,  you  can  also  select  an  existing  attribute  from  the  list 
box,  click  the  Duplicate  button,  and  edit  the  attribute  name  and 
value  text  fields. 

4  To  delete  an  attribute,  select  the  desired  entry  from  the  list  box 
and  click  the  Delete  button. 


Please  note  that  ActiveX  is  a Microsoft  Internet  Explorer  exten- 
sion. It  will  not  display  properly  with  other  browsers. 
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The  Basic  Tab  of  the  Marquee  Inspector 

Click  this  tab  to  view  the  special  options  for  the 
scrolling  marquee. 

Use  these  options  to  adjust  the  geometry  and  gen- 
eral display  properties  of  the  scrolling  marquee. 

Click  here  to  enter  the  message  text. 
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The  Marquee  tag  lets  you  place  a scrolling  message  on  your  Web  page 
when  the  IE  Module  is  installed  in  the  Modules  folder  within  the 
Adobe  GoLive  program  folder.  You  can  select  the  scrolling  behavior 
in  a dedicated  Marquee  Inspector  window. 


To  insert  a scrolling  marquee,  proceed  as  follows: 

1 Drag  the  Marquee  icon  from  the  Palette. 

2 Drop  the  marquee  on  a layout  grid  or  in  the  document  window. 

Adjusting  Display  Options  for  Scrolling  Marquees 

To  set  the  display  properties  of  the  scrolling  marquee,  proceed  as 
follows: 

1 Select  the  marquee  in  the  document  window  to  open  the  Mar- 
quee Inspector. 

2 Place  the  cursor  in  the  Width  text  field,  type  in  the  desired  width, 
and  press  the  Return  key  to  confirm  your  entry. 
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3 Place  the  cursor  in  the  Height  text  field,  type  in  the  desired 
height,  and  press  the  Return  key  to  confirm  your  entry. 

4 Place  the  cursor  in  the  HSpace  text  field,  type  in  the  desired  hor- 
izontal spacing,  and  press  the  Return  key  to  confirm  your  entry. 

5 Place  the  cursor  in  the  VSpace  text  field,  type  in  the  desired  ver- 
tical spacing,  and  press  the  Return  key  to  confirm  your  entry. 

6 If  your  marquee  is  inserted  into  a HTML  text  flow,  select  an  align- 
ment option  from  the  Align  popup  menu.  This  option  controls 
the  vertical  position  of  surrounding  text  relative  to  the  marquee 
box: 

- The  Default  option  aligns  the  marquee  based  on  the  align- 
ment settings  of  the  surrounding  text. 

Top  aligns  surrounding  text  with  the  top  of  the  marquee  box. 

- Middle  centers  surrounding  text  relative  to  the  marquee  box. 

- Bottom  aligns  surrounding  text  with  the  bottom  of  the  mar- 
quee box. 

7 To  assign  a background  color  to  the  scrolling  marquee,  drag  a 
color  from  the  Color  Palette  or  Site  Colors  tab  of  the  Site  Window 
onto  the  BG  Color  field. 

8 Place  the  cursor  in  the  Text  field,  type  in  the  desired  text  message, 
and  press  the  Return  key  to  confirm  your  entry. 

To  set  the  properties  of  the  scrolling  message,  proceed  as  follows: 

1 Click  the  Scrolling  tab  to  view  scrolling  options. 

2 Select  an  option  from  the  Behavior  popup  menu.  This  option 
controls  the  way  the  message  moves  across  the  marquee  box: 

- Scroll  causes  the  message  to  scroll  endlessly. 

- Slide  moves  the  message  into  the  marquee  box  and  keeps  it 
on  screen. 

- Alternate  makes  the  message  move  into  the  marquee  box  and 
bounce  back  and  forth  between  its  edges. 

3 If  you  want  the  message  to  scroll  endlessly,  leave  the  Forever 
checkbox  selected.  Alternatively,  place  the  cursor  in  the  Loops 
text  field  and  type  in  the  number  of  repetitions,  if  desired.  Press- 
ing the  Return  key  confirms  your  entry  and  deselects  the  Forever 
checkbox. 
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The  Scrolling  Tab  of  the  Marquee 
Inspector 

Click  this  tab  to  view  the  scrolling  options  for  the 
text  message. 

Use  these  options  to  control  the  scrolling 
properties. 


Use  these  options  to  set  the  scrolling  speed  of  the 
message. 

Click  here  to  select  the  direction. 


□ Marquee  Inspector 
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4 Place  the  cursor  in  the  Amount  text  field,  type  in  the  desired 
scrolling  speed  (in  pixels  between  each  scrolling  amount  in  mil- 
liseconds), and  press  the  Return  key  to  confirm  your  entry. 

5 Place  the  cu  rsor  i n the  Delay  text  field , type  i n the  scrol  I i ng  delay, 
and  press  the  Return  key  to  confirm  your  entry. 

6 In  the  Direction  of  options,  click  the  Left  or  Right  radio  button  to 
select  the  scrolling  direction. 


Please  note  that  the  Scrolling  Marquee  is  a Microsoft  Internet 
Explorer  extension.  It  will  not  display  properly  in  other  brows- 
ers. Preview  the  scrolling  marquee  frequently  using  the  built- 
in  Preview  mode  and/or  your  Microsoft  Internet  Explorer 
browser(s)  to  make  sure  that  it  has  the  right  “look  and  feel.” 
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Basic  Animation 


An  Animated  Button  Created  Using 
DHTML 


Dynamic  HTML 

This  chapter  describes  Adobe  GoLive’s  built-in  dynamic 
HTM  L tools,  which  enable  Web  designers  to  animate  their 
pages  without  delving  deeply  into  the  complexities  of 
Web  programming. 


Although  the  dynamic  HTML  (DHTML)  tools  that  Adobe  GoLive  offers 
rely  heavily  on  JavaScript  and  Cascading  Style  Sheets,  building  ani- 
mated pages  with  Adobe  GoLive  does  not  require  any  programming 
skills  or  specific  editors  that  rely  on  browser  plugins.  Whenever  you 
insert  a DHTML  object,  Adobe  GoLive  will  either  do  all  the  scripting 
for  you  automatically  or  let  you  choose  a script-based  action.  You 
can  now  build  animated  pages  with  drag  & drop  ease — then  watch 
your  Web  presentation  come  alive  in  Preview  mode. 

When  you  insert  a dynamic  object  with  Adobe  GoLive,  browser  inde- 
pendence is  guaranteed.  Whichever  dynamic  object  you  choose, 
Adobe  GoLive  will  automatically  insert  the  appropriate  JavaScript 
code  to  ensure  that  your  animation  displays  without  any  flaws  in  all 
popular  4.0  browsers,  including  Netscape  Navigator,  and  Netscape 
Communicator,  as  well  as  Microsoft  Internet  Explorer. 


The  following  example  illustrates  an  animated  button  that  is  high- 
lighted while  the  mouse  pointer  is  on  top  of  it. 


Click  here  to  read  about 
David  Brindle's 
triumph  at  Monterrey. 


Click  here  to  read  about 
David  Brindle's 
triumph  at  Monterrey. 


This  is  the  basic  button  image  displayed  by  the 
browser. 


Moving  the  mouse  pointer  over  the  button 
highlights  it. 


Creating  this  mouse  rollover  with  Adobe  GoLive  is  straightforward 
and  easy:  All  you  need  to  do  is  insert  a Button  Image  object  via  drag 
& drop,  set  up  the  default  and  “on  mouse  over”  images,  and  link  the 
button  with  its  destination. 
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DHTML  Objects  in  the  Palette 

Grouped  in  the  CyberObjects  Lab  of  the  Palette  is  a selection  of  ready- 
to-use  dynamic  HTML  elements. 


The  CyberObjects  Tab  of  the  Palette 


Use  the  objects  from  the  CyberObjects  tab  of  the  Palette  to  do  the  fol- 
lowing tasks: 

• Add  a date  and  time  stamp  to  your  page  (see  Date  and  Time 
Stamps  on  page  235).  This  information  lets  visitors  to  your  site 
see  when  your  page  was  changed  last. 

• Include  animated  navigation  buttons  on  your  page  (see  Button 
Images  on  page  236). 

• Add  dynamic  components  (see  Components  on  page  241).  Com- 
ponents let  you  embed  ready-made  chunks  of  HTML  into  your 
page,  allowing  you  to  manage  repetitive  page  content  with 
utmost  ease. 

• Add  a URL  popup  menu  (see  URL  Popup  on  page  245)  listing 
alternate  destinations  on  the  Web. 

• Add  an  action  to  the  page  header  (see  Action  Item  on  page  246) 
that  should  be  triggered  before  the  browser  starts  loading  the 
body  of  the  page. 

• Insert  an  action  in  the  HMTL  flow  of  the  body  section  (see  Inline 
Action  Item  on  page  248)  that  is  triggered  when  the  browser 
loads  the  body  of  the  page. 

• Attach  a browser  switching  script  to  the  page  header  (see 
Browser  Switch  Item  on  page  249)  that  reroutes  requests  from 
incompatible  browsers  to  alternate  pages. 

For  more  details,  please  refer  to  Part  77  — Using  Basic 

DHTML  Objects  later  in  this  chapter. 
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Advanced  Animation  Adobe  GoLive’s  advanced  animation  tools  let  you  create  full-scale  an- 
imations to  maximize  the  visual  impact  of  your  pages.  You  can  move 
objects  along  linear,  curved  or  random  “zig-zag”  animation  paths, 
hide  them  temporarily,  and  change  their  stacking  order.  By  combin- 
ing all  those  features,  you  can  produce  amazing  visual  effects — for 
example,  display  two  items  that  seem  to  revolve  around  each  other. 

You’ll  use  the  following  tools  to  create  advanced  DHTML  animations 
with  Adobe  GoLive: 

• the  Floating  Box  icon  from  the  Body  Tags  tab  of  the  Palette 

• the  Floating  Box  Inspector 

• the  Timeline  Editor 


The  illustration  below  shows  Adobe  GoLive’s  DHTML  tools  and  an  ex- 
ample of  animation. 


Creating  DHTML  Animations  in  Adobe 
GoLive 

Dragging  the  Floating  Box  icon  from  the  Palette 
into  the  document  window  inserts  a floating  box. 


This  floating  box  contains  formatted  text.  It  moves 
along  a linear  path  from  the  upper  center  to  the 
lower  left  corner  of  the  page. 

This  floating  box  containsan  animated  GIF  image. 
It  moves  along  a curved  path  from  the  upper  left 
to  the  upper  right  corner  of  the  page. 


TheTimeline  Editor  lets  you  control  the  motion  of 
the  floating  box  over  time. 

Selectable  keyframes  mark  the  position  of  a float- 
ing box  while  the  animation  plays  back. 

The  Floating  Box  Inspector  controls  the  initial  po- 
sition, layering,  visibility,  and  curve  shape  of  the 
floating  box. 


The  following  sections  discuss  the  key  elements  used  for  DHTML  an- 
imation in  more  detail. 


Floating  Boxes 

Floating  boxes  are  the  subject  of  the  Cascading  Style  Sheets  Position- 
ing (CSS-P)  specification  issued  by  the  World  Wide  Web  Consortium 
(W3C).  In  Adobe  GoLive,  the  Floating  Box  icon  in  the  Body  Tags  tab  of 
the  Palette  represents  floating  boxes.  Inserting  this  object  creates  a 
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floating  box  in  the  upper  left  corner  of  the  document  window.  (If 
other  floating  boxes  are  present,  Adobe  GoLive  stacks  them  in  the  or- 
der of  insertion.)  Once  you  insert  the  floating  box,  you  can  add  an  im- 
age, text,  or  other  content,  and  use  Adobe  GoLive’s  rich  set  of  tools  to 
adjust  their  appearance  as  desired. 

Technically  speaking,  floating  boxes  rely  on  the  <DIV>  tag  to  create 
independent  sections  within  a Web  pagethatare  “suspended”  above 
the  normal  flow  of  HTML.  Their  position  and  properties  can  be  dy- 
namically controlled  by  scripting.  They  accept  any  HTML  content  you 
can  place  in  your  pages,  including  text,  images,  and  even  other  float- 
ing boxes.  Avoid  placing  tables  or  Layout  Grids  inside  of  Floating 
Boxes.  Inconsistent  results  including  browser  crashes  may  occur. 

The  Timeline  Editor 

The  Timeline  Editor  is  the  tool  you  use  to  set  up  the  stage  for  your  an- 
imation. The  Timeline  fd/'for  window  appears  below,  along  with  brief 
explanations  of  its  most  important  features. 


The  Timeline  Editor 

The  Autoplay  button  lets  you  specify  whether  a 

scene  should  play  back  automatically.  

The  Scenes  popup  menu  lets  you  create  addition- 1 rffiVl 

a I scenes. 


The  Actions  Track  lets  you  insert  actions  to  be  trig- 
gered during  animation  playback. 

There  is  one  time  track  for  each  floating  box  in  the 
current  page. 

This  is  a keyframe.  Keyframes  let  you  define 
events  during  animation  playback. 

The  Time  Cursor  shows  the  current  point  in  time.  ■ 

The  Loop  and  Palindrome  options  control  the 
repetition  of  the  animation  during  playback. 

The  Playback  buttons  let  you  preview  the  anima- 
tion. 


□ earthi  nspace.html 
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The  Frames  per  Second  popup  menu 
controls  playback  speed. 


Before  using  the  Timeline  Editor,  you  need  to  understand  some  basic 
concepts  associated  with  animation: 

• Scenes'.  Scenes  enable  Web  authors  to  include  multiple  anima- 
tions in  the  same  Web  page.  All  scenes  share  the  same  docu- 
ment and  Timeline  Editor  windows.  You  can  create  multiple 
scenes  for  each  page  and  have  them  play  back  automatically 
(default  setting),  trigger  them  via  scripted  actions,  or  provide 
buttons  for  the  visitor  to  click. 


Advanced  Animation 


233 


• Frames:  An  animation  consists  of  individual  frames.  As  used  in 
connection  with  video  display  systems,  frames  are  images  that 
are  played  back  in  a rapid  sequence  to  create  a visual  effect  of 
motion.  The  speed  with  which  an  animation  plays  back  depends 
on  the  number  of  frames  per  second  (FPS).  The  more  frames  per 
second  you  assign  to  an  animation,  the  smoother  the  impres- 
sion of  fluid  motion. 

• Keyframes:  Keyframes  mark  points  on  the  time  track  of  an  ani- 
mation sequence  at  which  some  specific  change  in  property 
occurs.  These  include  changes  in  direction  within  the  animation 
path  as  well  as  modifications  of  general  properties,  such  as  visi- 
bility and  stacking  order.  For  each  keyframe,  you  can  control  the 
position  of  the  associated  floating  box  by  dragging  it  to  the 
desired  location  in  the  document  window.  Also,  the  distance 
between  two  keyframes  determines  the  playback  speed:  The 
shorter  the  distance,  the  faster  the  animation  will  play  back  and 
vice  versa. 

• Time  Tracks:  Adobe  GoLive’s  Timeline  Editor  lets  you  place  key- 
frames  in  a dedicated  time  track  for  each  floating  box  to  adjust 
its  timing  and  location.  Each  single  track  accepts  multiple  key- 
frames,  which  you  can  place  where  you  want. 

The  Floating  Box  Inspector 

The  Floating  Box  Inspector  allows  you  to  make  settings  that  deter- 
mine both  static  and  dynamic  properties  of  the  floating  box.  Static 

properties  include: 

• the  width  and  height  of  the  floating  box 

• the  background  color  or  background  image  displayed  in  the 
floating  box 

You  can  set  the  dynamic  properties  for  individual  keyframes  that  the 

Timeline  Editor  selects,  including: 

• the  position  of  a floating  box  at  a given  point  in  time  during  the 
animation 

• visibility  during  individual  phases  of  the  animation  sequence 

• dynamic  layering  of  multiple  floating  boxes 

• shape  of  the  animation  path 
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Actions 

Actions  are  another  advanced  animation  feature  that  you  can  use 
with  the  Timeline  Editor,  button  images,  and  any  links.  Actions  are 
ready-to-use  scripts  that  allow  Web  authors  to  enrich  their  anima- 
tions by  adding  sound,  trigger  the  playback  of  scenes,  dynamically 
change  the  content  of  images,  and  control  other  processes  in  the 
browser  window.  You  can  select  them  in  the  Action  Inspector  after  in- 
serting an  action  marker  on  the  Actions  Track  of  the  Timeline  Editor, 
or,  if  attached  to  an  image  or  text,  in  the  Actions  tab  of  the  Button 
Inspector  or  Text  Inspector. 

For  more  details,  please  refer  to  Part  72  — Creating  Advanced  Anima- 
tions (starting  on  page  250). 


Part  11 — Using  Basic  DHTML  Objects 

The  following  pages  contain  step-by-step  instructions  for  using  the 

basic  DHTML  objects  in  the  CyberObjects  tab  of  the  Palette.  Part  11 

also  provides  some  background  information  on  what  happens  “be- 
hind the  scenes”.  This  part  has  seven  sections: 

• The  section  Date  and  Time  Stamps,  starting  on  page  235, 
explains  how  you  add  static  revision  information  to  your  page. 

• The  section  Button  Images,  starting  on  page  236,  describes  how 
you  create  basic  “on  mouse  over”  animations  with  the  button 
image  object. 

• The  Components  section,  starting  on  page  241 , introduces  the 
component  object  that  allows  you  to  reuse  page  fragments  with 
common  design  elements  on  multiple  pages. 

• The  section  URL  Popup,  starting  on  page  245,  discusses  how  you 
can  add  a popup  menu  with  alternate  destinations  on  the  Web 
to  your  page. 

• The  Action  Item  section,  starting  on  page  246,  outlines  how  to 
insert  actions  that  should  be  triggered  before  the  browser  starts 
loading  the  body  of  the  page. 

• The  Inline  Action  Item  section  on  page  248  explains  how  you 
insert  actions  that  should  be  triggered  when  the  browser  loads 
the  body  of  the  page. 

• The  section  Browser  Switch  Item,  starting  on  page  249,  describes 
how  to  implement  a browser  testing  script  that  reroutes 
requests  from  incompatible  browsers  to  alternate  pages. 


Using  Basic  DHTML  Objects 
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Date  and  Time 
Stamps 


Inserting  a Date  and  Time  Stamp 


This  feature  lets  you  add  a date  and/or  time  stamp — for  example,  at 
the  bottom  of  your  page — allowing  visitors  to  see  when  your  site  was 
changed  last. 

Adobe  GoLive  reads  the  current  date  and  time  of  day  from  your  com- 
puter’s built-in  real-time  clock  and  writes  the  result  into  a custom 
tag.  The  date  and  time  information  is  dynamically  updated  whenev- 
er you  save  the  page. 


Adding  a Date  and/or  Time  Stamp 


Brazilian 


Swiss  Italian 
Swiss  German 
Swiss  French 
Finnish 
Australian 
Norwegian 
French  Canadian 
Danish 
Spanish 
Swedish 
Flemish 
Dutch 
Italian 
German 
British 

French 


To  insert  a date  and  time  stamp,  proceed  as  follows: 

1 Type  in  descriptive  text,  for  example  “Revised  last: 

2 Drag  the  Date  & Time  icon  from  the  Palette. 

3 Drop  the  date  or  time  stamp  behind  the  text  typed  in  step  1. 

4 Set  up  the  date  format  in  the  context-sensitive  Inspector  window, 
now  titled  Date  & Time  Inspector. 

- Choose  the  U.S.  option  from  the  Format  menu  in  the 

Date  and  Time  Inspector,  or  any  other  of  the  numerous  coun- 
try-specific date  and  time  formats  if  your  page  contains  ma- 
terial in  a foreign  language. 

- Select  a format  for  the  date  and  time  item  you  have  added — 
for  example,  1/28/98. 
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The  Date  & Time  Inspector 


Choose  a country-specific  set  of  formatting 
options  from  the  Format  popup  menu. 


Click  a radio  button  to  choose  a format  for  the 
current  date  or  time  stamp. 


5 If  you  wish  to  add  a time  stamp,  type  in  a separator — for  exam- 
ple, “at  ”, 

6 Drag  another  Date  & Time  object  from  the  Palette  and  drop  it  be- 
hind the  separator. 

7 Choose  a time  format  in  the  Date  & Time  Inspectors — for  exam- 
ple, 5:43:07  PM. 

8 Save  your  page.  The  date  and  time  stamp  will  display  the  exact 
time  when  the  save  command  was  executed. 


The  Button  Image  object  lets  you  add  “mouse  rollover”  button  im- 
ages to  your  page.  You  can  use  these  buttons  as  animated  navigation 
controls  or  to  let  visitors  control  animations.  The  animation  effect 
occurs  by  instructing  the  browser  to  toggle  between  two  (or  three) 
slightly  different  images  of  the  same  button.  These  buttons  are  easily 
created  in  Adobe  Photoshop  oran  equivalent  imagingapplication — 
forexample,  byapplyinga  highlighting  filter  or  blackand  whitedith- 
ering. 


Button  Images 


Button  Images 
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The  first  image  determines  the  normal  appearance  of  the  button, 
that  is,  how  it  looks  while  the  mouse  pointer  is  anywhere  else  on  the 
page.  The  second  image  is  a highlighted  button  that  shows  when  the 
mouse  pointer  is  on  top.  The  third  image  appears  when  the  button 
is  being  clicked. 

Adobe  GoLive  inserts  a custom  tag  that  serves  as  a container  for  the 
images  plus  a JavaScript  that  switches  its  content,  depending  on  the 
current  location  of  the  mouse  pointer. 


drop  it  on  the  layout  grid 
or  document  window  to 
insert  an  animated 
button. 


' \ 

The  mouse 

k Click  here  to  reed  about 

cursor  highlights  jv 

this  button. 

triumph  at  Monterrey. 

Adding  and  Animating  a Button  Image 


To  insert  and  animate  a button  image,  proceed  as  follows: 

1 Drag  the  Button  Image  icon  from  the  Palette. 

2 Drop  it  at  the  desired  location  in  the  document. 


Tip:  You  can  drop  the  button  image  icon  on  an  existing  image 
to  turn  that  image  into  a button  image. 

3  Set  up  the  image  in  the  Basic  tab  of  the  context-sensitive  Inspec- 
tor window,  now  titled  Button  Inspector: 

Enter  a unique  button  designator  in  the  Name  field. 

- Toselecta  main  image,  click  the  Image- Main  marker  button, 
then  link  using  the  standard  Adobe  GoLive  methods. 


Alternatively,  you  can  also  click  the  Browse  button  and  choose  an  im- 
age file  in  the  subsequent  file  selection  dialog  or  Point  & Shoot  at  an 
image  in  the  Site  window  (see  section  "Point  & Shoot"  on  page  1 58 
in  chapter  “Building  Web  Pages",  for  reference). 
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The  Basic  Tab  of  the  Button  Inspector 


Type  in  a unique  Name  here. 


Click  these  buttons  to  select  the  main,  “on 
mouse  over”  and  “on  click”  images. 

Type  in  the  Universal  Resource  Locator  here... 

. . . Use  any  of  the  standard  Adobe  GoLive  link- 
ing methods. 


- To  select  an  “on  mouse  over”  image,  click  the  Image  - Over 
marker  button,  then  check  the  checkbox  next  to  the  file  selec- 
tion text  box  to  tell  Adobe  GoLive  that  you  want  a second  im- 
age. Repeat  the  file  selection  procedure  outlined  above. 

- To  pick  an  “on  click”  image,  click  the  Image  - Click  marker  but- 
ton, then  check  the  checkbox  next  to  the  file  selection  text  box 
to  tell  Adobe  GoLive  that  you  want  a third  image.  Repeat  the 
file  selection  procedure  outlined  above. 

Drag  & drop  is  another  alternative  for  assigning  the  three  images: 

• Drag  the  first  image  from  the  Site  Window  at  the  button  image 
icon  in  the  document  window  to  assign  the  main  image. 

• Alt-drag  the  second  image  from  the  Site  Window  at  the  button 
image  icon  in  the  document  window  to  assign  the  “on  mouse 
over”  image. 

• Drag  the  third  image  from  the  Site  Window  at  the  button  image 
icon  in  the  document  window  to  assign  the  “on  click”  image. 

• Launch  a version  4 browser  to  preview  the  button  image.  (It  will 
work  in  some  version  3 browsers.) 


Displaying  Button  Information  in  the  Browser 


To  enter  an  informative  message  that  appears  at  the  bottom  of  the 
browser  window  while  the  cursor  is  on  top  of  the  button,  proceed  as 
follows: 

1 Switch  to  the  Msg  & Link  tab  of  the  Button  Inspector. 


Button  linages 
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2 Click  the  checkbox  next  to  the  message  text  box  to  tell  Adobe 
GoLive  that  you  want  to  enter  descriptive  text. 

3 Place  the  cursor  in  the  Msg  text  box. 

4 Enter  a description  of  what  the  button  does  when  being 
clicked — for  example,  “Click  here  to  view  more  product  fea- 
tures”. 

5 Press  the  Return  key  to  confirm  your  entry. 


The  Msg  & Link  Tab  of  the 

□ Button  Inspector  § 

Button  Inspector 

r Basic  f Status  & Link  ) Actions  ] 

Type  in  a button  description  here. 

— Status  0 | Click  here  to  view  more... 

Type  in  a Universal  Resource  Locator  here...  

-URL  0 | file :///Macintosh^20HD/ Acrobat-rr| 

...  Use  any  of  the  standard  Adobe  GoLive  link-  

[vt  Absolute  [Browse...  j 

ing  methods. 

Target  | |[t  ) 

r J 

Linking  a Button  Image 


To  link  the  button  image  with  another  page  or  location  on  the  same 
page,  proceed  as  follows: 

Use  Point  & Shoot  to  link  to  a Web  page  in  the  Site  window  or  to 
an  anchor  on  the  same  page. 

Alternatively,  you  can  type  in  a Universal  Resource  Locator  in  the 
Ref.  text  box  and  press  the  Return  key,  or  click  the  Browse  button 
to  locate  the  Web  page  in  the  subsequent  file  selection  dialog. 


Attaching  Actions  to  a Button  Image 


The  Actions  tab  of  the  Button  Inspector  lets  you  attach  scripted  ac- 
tions to  the  button  image — for  example,  an  action  that  changes  the 
background  color  of  the  page. 

To  attach  an  action  triggered  by  a mouse  or  key  event,  proceed  as 
follows: 

1 Click  the  Actions  tab  rider  of  the  Button  Inspector  to  open  that 
tab. 
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2 Choose  a mouse  or  key  event  from  the  list  box  to  the  left: 

- Select  Mouse  Click  to  have  a single  mouse  click  trigger  the  ac- 
tion. 

- Select  Mouse  Enter  to  have  the  action  triggered  when  you 
move  the  mouse  pointer  over  the  button. 

- Select  Mouse  Exit  to  have  the  action  triggered  you  move  the 
mouse  pointer  off  the  button. 

3 Click  the  “+”  button  to  add  an  action  placeholder  to  the  Actions 

list  box  to  the  right. 


The  Actions  Tab  of  the  Button  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  add  action  attachment. 

Use  this  menu  to  choose  an  action. 

Use  the  color  field  to  select  the  target  color  for 
the  Set  BackColor  action. 


4  Choose  an  action  from  the  Actions  menu  (see  the  General  section 
starting  on  page  271  for  a complete  reference  of  the  actions  that 
Adobe  GoLive  supports). 


Please  note  that  attaching  an  action  disables  the  URL  option  in 
the  Link  tab  of  the  Button  Image  Inspector. 

5 Edit  the  parameters  associated  with  the  action.  For  example,  if 
you  are  usingtheSef  BackColor  action,  click  the  Background  Color 
field,  select  a color  from  the  Color  Palette,  then  drag  it  from  the 
preview  pane  of  the  Color  Palette  onto  the  color  field. 

6 Launch  a 4.x  browser  to  preview  the  action.  (The  3.0  browsers 
support  some  actions.  For  your  convenience,  browser  compati- 
bility information  appears  next  to  the  name  of  each  action.) 


Components 
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Components  Dynamic  components  enable  Web  authors  to  manage  repetitive  con- 

tent with  ease  while  designing  a site.  Similar  to  the  Publish  & Sub- 
scribe feature  that  many  Macintosh  applications  support,  Adobe 
GoLive’s  components  mechanism  lets  you  reference  ready-made 
chunks  of  HTML  (referred  to  as  “snippets”)  and  embed  them  into 
your  page  as  dynamic  elements,  complete  with  text,  images,  and 
other  visual  content. 


This  feature  is  particularly  useful  if  the  site  you  are  working  on  has 
common  design  elements  that  recur  on  all  pages,  such  as  headers 
and  footers.  The  idea  is  to  store  those  elements  i n a single  file  instead 
of  inserting  them  physically  into  each  and  every  page. 


A Component  Embedded  in  a Page 


A component  is  easily  identified  by  its  dotted  bor- 
der. 


Linking  the  component  placeholder  with  the 
source  file  displays  its  content. 


For  example,  if  your  site  design  hasn’t  been  finalized  yet  and  your 
customer  asks  you  to  change  the  appearance  of  a common  page 
header,  components  relieve  you  of  the  tedious  task  of  opening  and 
editingall  pages  throughout  yoursite.  When  you  embed  that  header 
as  a dynamic  component  instead  of  “hard-coding”  it  into  your  pages, 
all  you  have  to  do  is  double-click  the  header  object,  edit  the  source 
file  (an  HTML  page  containing  only  the  page  header),  and  let  Adobe 
GoLive  automatically  update  all  pages. 

Adobe  GoLive  encloses  the  embedded  HTML  page  or  fragment  in  a 
custom  tag  that  the  browser  ignores  at  runtime  (although  its  content 
is  understood  and  interpreted  correctly),  marking  it  as  dynamic  page 
content  that  needs  to  be  updated  each  time  the  source  file  changes. 
(Updating  occurs  only  in  Adobe  GoLive  locally,  not  on  the  Web  site.) 


Please  note  that  dynamic  components  are  only  updated  while 
you  work  on  your  local  hard  disk.  Pages  on  the  Web  server  are 
not  updated  by  just  uploading  the  source  file,  so  you  need  to 
upload  all  pages  that  reference  a component  to  update  your 
site  after  changing  the  source  file. 
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Setting  Up  a Page  for  Use  as  a Component 


Click  this  button  to  set  up  the  current  page  for  use 
as  a component. 


Saving  a Component 


Dynamic  HTML 


Creating  Source  Files  for  Embedding 

There  are  two  basic  source  file  types  for  dynamic  components:  You 
can  embed  either  full-scale  HTML  pages  or  HTML  fragments. 

To  create  a source  file  proceed  as  follows: 

1 Create  a new  page  using  the  New  command  from  the  File  menu. 

2 Click  the  small  page  symbol  above  the  main  content  area  of  the 
document  window  to  bring  up  the  Page  Inspector  in  the  Inspector 
window. 

3 Switch  to  the  FITML  tab  of  the  Page  Inspector. 


4 Click  the  Component  button  at  the  bottom  of  the  HTML  tab.  This 
sets  up  the  current  page  for  use  as  a dynamic  component. 

Alternatively,  you  may  strip  off  HTML  code  elements  that  are  not  re- 
quired and  create  an  HTML  fragment.  (For  instructions,  please  refer 
to  HTML  Fragments  on  page  106.) 

5 Add  the  desired  content — for  example,  a layout  grid  with  your 
customer’s  corporate  logo  and  headline  on  it. 

6 Save  the  file  in  the  Components  subfolder  of  the  “site  data”  folder 
to  have  it  listed  in  the  Extra  tab  of  the  Site  Window  (see  Managing 
Stationery  in  the  Site  Window  on  page  650). 


Components 
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When  the  Site  Window  isopen  in  the  background,  the  Save  dialog  box 
offers  a convenient  shortcut  for  saving  the  file  to  the  “site  data” 
folder.  The  popup  menu  above  the  files  list  box  shows  the  folders 
that  are  used  by  the  active  site,  that  is,  the  site  that  owns  the  Site  Win- 
dow nearest  the  front. 

To  save  your  component  in  the  active  site,  proceed  as  follows: 

1 Click  the  popup  menu  and  choose  Components. 

2 Click  Save  and  go  to  the  Extra  tab  of  Site  Window  to  see  whether 
your  component  has  appeared. 


Inserting  a Component  and  Linking  with  the  Source  File 


Inserting  a Component  Placeholder 


To  insert  a component  marker  in  the  current  document  (the  “host” 

page)  and  link  it  with  an  HTML  page  or  fragment,  proceed  as  follows: 

1 Make  sure  you  have  saved  the  desired  source  file.  (It  does  not 
need  to  be  open.) 

2 Drag  the  Component  icon  from  the  Palette. 

3 Drop  it  at  the  desired  location  in  the  host  page.  A rectangular  box 
with  a dotted  border  appears  in  the  document  window.  This  is 
the  component  marker. 


Please  note  that  component  placeholders  resize  automatically 
as  soon  as  you  fill  them  with  content,  assuming  the  size  of  the 
embedded  object.  Keep  this  fixed  size  relationship  in  mind 
when  designing  the  source  file  to  make  sure  that  you  get  the 
desired  results.  Optionally,  you  can  resize  the  width  of  compo- 
nent placeholders  when  you  put  them  on  a layout  grid. 


4  Set  up  the  component  in  the  context-sensitive  Inspector  window, 
now  titled  Component  Inspector: 
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The  Component  Inspector 

Type  in  a Universal  Resource  Locator  here... 

...  Use  any  of  the  standard  Adobe  GoLive  link- 
ing methods. 


Use  the  Point  & Shoot  button  to  link  to  an  HTML  page  or  frag- 
ment in  theS/'fe  Window  or — if  the  source  file  isopen — to  the 
small  page  icon  in  the  document  window  of  the  desired  page 
or  fragment. 

Follow  the  standard  Adobe  GoLive  linking  methods. 


{ 


5 The  referenced  component  should  appear  in  the  document  win- 
dow of  your  host  page  now  (see  A Component  Embedded  in  a Page 
on  page  241). 


Inserting  a Component  via  Drag  & Drop 


Components  in  the  Extra  Tab  of  the 
Palette 


To  insert  a component  page  via  drag  & drop,  proceed  as  follows: 

1 Make  sure  you  have  saved  the  desired  source  file.  (It  does  not 
need  to  be  open.) 

2 Click  the  Extra  tab  of  the  Palette,  choose  Components  from  the 
view  control  menu  at  the  bottom  of  the  window,  and  locate  the 
desired  component.  Components  are  displayed  as  thumbnails  to 
let  you  preview  their  content. 


URL  Popup 
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3 Drag  the  Component  icon  and  drop  it  at  the  desired  location  in 
the  host  page. 

4 The  referenced  component  should  now  appear  in  the  document 
window  of  your  host  page.  If  you  drop  it  on  a layout  grid,  you 
may  have  to  resize  its  width. 


Editing  the  Source  File 


To  edit  the  source  file,  proceed  as  follows: 

1 Double-click  on  the  embedded  component.  Adobe  GoLive  will 
automatically  open  the  source  file. 

2 Make  the  desired  changes  and  save  the  source  file. 

3 When  saving,  any  changes  you  have  made  should  appear  imme- 
diately in  the  document  window. 


URL  Popup 


Inserting  an  URL  Popup 


The  URL  Popup  item  inserts  a popup  menu  with  Web  sites  or  local 
pages  that  offers  shortcuts  to  other  locations  on  the  Web.  You  can 
add  as  many  destinations  as  necessary  and  edit  both  their  visual  la- 
bels and  their  URLs. 


To  insert  and  edit  a URL  popup  menu,  proceed  as  follows: 

1 Drag  the  URL  Popup  icon  from  the  Palette. 

2 Drop  it  at  the  desired  location  in  the  document. 

3 Set  up  the  popup  menu  in  the  Basic  tab  of  the  context-sensitive 
Inspector  window,  now  titled  URL  Popup  Inspector. 
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The  URL  Popup  Inspector 


Type  in  a visual  label  here. 

Type  in  a Universal  Resource  Locator  here,  click 
Browse  to  select  a local  destination  page,  or 
click  to  Point  & Shoot. 

Use  these  buttons  to  move  a selection  up  or 
down  in  the  menu. 

Use  these  buttons  to  delete,  duplicate,  or  create 
new  menu  items. 


4 Click  New  to  create  a new  menu  item. 

5 In  the  Label  text  box,  enter  a visual  label  that  appears  in  the  pop- 
up menu. 

6 In  the  URL  text  box,  enter  the  Web  address  of  a site  on  the  Web 
or  the  path  and  file  name  of  a local  page. 

Alternatively,  you  can  Point&Shootata  page  in  the  Files  tab  ora  URL 

in  the  External  tab  of  the  Site  Window.  You  can  also  click  the  Browse 

button  and  select  a local  file  in  the  subsequent  file  selection  dialog. 

7 Create  more  menu  items — for  example,  by  duplicating  an  item 
selected  in  the  list  box  and  editing  it. 

8 To  change  the  position  of  an  item  in  the  popup  menu,  select  it  in 
the  list  box,  then  use  the  up  and  down  arrow  buttons  to  shift  it 
to  the  desired  position. 

9 If  necessary,  use  the  Delete  key  to  remove  excess  items. 

10  To  make  the  new  URL  appear  in  a frame  set,  go  to  the  Detail  tab 
of  the  URL  Popup  Inspector  and  use  the  target  text  box  or  popup 
menu  to  specify  the  window  or  frame  where  you  want  it  to  ap- 
pear. 

11  Preview  the  URL  popup  menu  in  the  browserand  check  whether 
its  links  work. 


Action  Item 


The  Action  Item  element  inserts  a script  into  the  header  of  the  docu- 
ment that  triggers  a user-selectable  action  before  the  browser  loads 
the  body  of  the  page. 


Action  Item 
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Inserting  an  Action  Item 


3 


The  Action  Inspector 


Choose  an  action  to  be  triggered  by  the  Action 
Item. 


□□ 


To  insert  and  edit  an  action  item,  proceed  as  follows: 

1 Drag  the  Action  Item  icon  from  the  Palette. 

2 Drop  it  in  the  head  section  of  the  document.  If  the  head  section 
is  not  open,  drag  on  to  the  small  triangle  directly  below  the  Lay- 
out tab  and  wait  for  the  head  section  to  open,  then  drag  & drop 
it  there. 

3 Set  up  the  popup  menu  in  the  context-sensitive  Inspector  win- 
dow, now  titled  Action  Inspector. 


4  For  instructions  on  using  individual  actions,  please  refer  to  the 
section  Using  Actions,  starting  on  page  269. 
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Inline  Action  Item  The  Inline  Action  Item  element  inserts  a script  item  in  the  body  of  the 

page  that  serves  as  a placeholder  for  HTML  code  triggers  a when  the 
browser  loads  the  body  section. 

Inserting  an  Inline  Action  Item 


The  Inline  Action  Inspector 


To  insert  and  edit  an  inline  action  item,  proceed  as  follows: 

1 Drag  the  Inline  Action  Item  icon  from  the  Palette. 

2 Drop  it  in  the  body  section  of  the  document. 

3 Go  to  the  context-sensitive  Inspector  window,  now  titled  Inline 
Action  Inspector. 


4 Choose  the  Document  Write  action  (see  page  285)  from  the 
Message  submenu  of  the  Actions  menu  and  set  it  up  as  desired. 

5 Preview  the  action  in  a 4.x  browser  (see  page  563.) 


Browser  Switch  Item 
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Inserting  a Browser  Switch  Item 


3 


The  Browser  Switch  Inspector 

Select  Auto  to  have  Adobe  GoLive  make  the  de- 
cision on  browser  compatibility. 


Use  these  checkboxes  to  specify  the  browsers 
that  support  the  HTML  in  the  current  page. 


Choose  an  alternate  page  to  be  loaded  if  the 
browser  version  doesn’t  match  the  content  of 
the  page. 


The  Browser  Switch  Item  element  inserts  a script  into  the  header  of 
the  document  that  reads  the  application  name  and  version  of  each 
browser  trying  to  access  the  page  and  switches  to  an  alternate  page 
if  the  browser  version  isn’t  compatible.  For  example,  you  can  use  this 
feature  to  have  a 3.x  browser  switch  to  another  page  if  the  current 
page  contains  animations  that  only  4.0  browsers  can  play  back. 


To  insert  and  edit  a Browser  Switch  Item,  proceed  as  follows: 

1 Drag  the  Browser  Switch  Item  icon  from  the  Palette. 

2 Drop  it  in  the  head  section  of  the  document.  If  the  head  section 
is  not  open,  drag  on  to  the  small  triangle  directly  below  the  Lay- 
out tab  rider  and  wait  for  the  head  section  to  open,  then  drag  & 
drop  it  there. 

3 Set  up  the  browser  switch  item  in  the  context-sensitive  Inspector 
window,  now  titled  Browser  Switch  Inspector: 
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4 Use  the  options  in  the  Supported  Browsers  section  as  follows: 

- Select  Auto  if  you  want  Adobe  GoLive  to  decide  on  browser 
compatibility.  For  example,  if  your  page  contains  DHTML  an- 
imations or  Cascading  Style  Sheets  formatting,  Adobe  GoLive 
will  check  only  the  4.x  and  5.x  versions  and  configure  the 
script  to  reroute  requests  from  2.x  and  3.x  browsers. 

Ifyou  knowwhich  browserversionsarecompatiblewithyour 
page,  you  can  also  deselect  the  Auto  checkbox  and  the  appro- 
priate checkboxes  for  browsers  that  can’t  display  the  page 
without  errors. 

5 Type  the  path  and  file  name  of  the  alternate  page  in  the  Alternate 
Link  text  box,  click  Browse  to  select  a page  in  the  subsequent  file 
selection  dialog,  or  use  Point &Shootto  linkto  a page  in  the  Site 
Window.  Be  sure  to  include  a browser  incompatibility  message  in 
the  alternate  page,  such  as  “Please  download  a newer  browser 
version  to  view  the  original  page.” 

6 When  you  finish,  test-view  the  page  with  an  incompatible  brows- 
er and  check  whether  the  request  is  correctly  rerouted. 

Part  12 — Creating  Advanced  Animations 

Part  12  of  this  chapter  offers  step-by-step  instructions  for  using  float- 
ing boxes,  the  Timeline  Editor,  and  the  Floating  Box  Inspector  to  cre- 
ate pages  with  multiple  animated  objects. 

• The  section  Creating  an  Object  to  Be  Animated,  starting  on 
page  251,  explains  how  to  insert  floating  boxes  and  fill  them 
with  visible  content. 

• The  section  Animating  a Floating  Box,  on  page  254,  details  how 
you  add  motion  to  floating  boxes. 

• The  section  Working  with  Multiple  Floating  Boxes,  starting  on 
page  259,  instructs  you  how  to  add  more  animated  objects  and 
coordinate  their  relative  motions. 

• The  section  Inserting  Actions  in  Your  Animation,  starting  on 
page  266,  introduces  the  concept  of  scripted  actions. 

• The  section  Using  Multiple  Scenes,  starting  on  page  267,  outlines 
how  you  can  reuse  floating  boxes  in  multiple  scenes. 
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Creating  an  Object  to 
Be  Animated 


3 


Any  object  you  want  to  animate  must  be  enclosed  in  a floating  box. 
Generally,  you  can  insert  any  tag  from  the  Palette  that  goes  into  the 
body  section  of  a Web  page.  To  provide  content  for  an  animation, 
consider  transparent  GIF  images  (also  known  as  GIF  89a)  as  your  first 
choice.  Transparent  GIFs  create  a very  lively  impression  of  motion 
because  they  don’t  conceal  what  is  underneath  them  while  moving 
across  the  page.  Also  suitable  are  normal  GIFs  or  formatted  text.  You 
can  also  choose  an  opaque  background  color  or  background  image 
if  you  don’t  want  the  floating  box  to  be  transparent. 

Technically  speaking,  a floating  box  is  Adobe  GoLive’s  visual  repre- 
sentation of  a DIV  tag  formatted  with  a CSS  ID  style.  The  ID  style  spec- 
ifies the  width,  visibility,  and  absolute  position  of  the  floating  box, 
instructing  the  browser  to  create  a subdivision  that  is  not  part  of  the 
normal  flow  of  HTM L code  within  the  page.  This  property  of  being 
absolutely  positioned  allows  floating  boxes  to  be  moved. 

Creating  an  object  is  the  first  thing  you  need  to  do  when  setting  up 
an  animation.  It  involves  two  steps: 

• inserting  a floating  box 

• setting  its  static  properties,  including  HTML  content,  size,  and 
background  image  or  color  (if  desired) 

The  following  sections  detail  these  steps. 

Inserting  a Floating  Box 

To  insert  a floating  box,  proceed  as  follows: 

1 Drag  the  Floating  Box  icon  from  the  Palette. 

2 Drop  it  at  the  desired  location  in  the  document  window. 

Alternatively,  you  can  double-click  the  Floating  Box  icon  in  the  Pal- 
ette to  have  Adobe  GoLive  insert  a floating  box  in  the  upper  left  cor- 
ner of  the  document  window. 
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Inserting  a Floating  Box 

„ A 


Drag  the  Floating  Box  icon 
from  the  Palette  and  drop  it 
in  your  document  window. 


Clicking  the  yellow  marker  se- 
lects the  floating  box. 

Clicking  its  outline  selects  the 
floating  box,  allowing  it  to  be 
dragged  around. 

This  is  the  content  area.  It 
accepts  text  or  any  body  tag 
from  the  Palette. 


This  number  indicates  the  order 
of  insertion,  allowing  you  to 
identify  individual  floating  box- 
es with  ease.  You  will  need  this 
number  later  on  when  working 
with  the  Timeline  Editor. 


Click  a resize  handle  and  drag  to 
resize  the  floating  box. 


Adding  Content  to  a Floating  Box 


Placing  an  Image  in  a Floating  Box 


To  add  content  to  a floating  box,  proceed  as  follows: 

1 Drag  any  object  from  the  Palette  directly  onto  the  content  area. 
For  example,  to  add  an  image  that  you  want  to  float  across  the 
page,  drag  the  Image  icon  from  the  Body  Tags  tab  of  the  Palette 
into  the  floating  box.  The  illustration  below  outlines  this  process. 


Floating  box  without 
content 


Floating  box  with  image 
placeholder 


Floating  box  with  image 
selected 


An  intermittent  bug  in  Netscape’s  4.0  browsers  may  cause  the 
content  of  an  animated  floating  box  to  temporarily  disappear, 
especially  if  the  content  is  an  image  button.  Here  is  a simple 
workaround:  Click  the  content  area  and  insert  a non-breaking 
space  (type  Alt-Space)  before  the  image  button.  This  should  fix 
the  problem. 


Alternatively,  you  can  enter  text  by  clicking  the  content  area  of  the 
outline  of  the  floating  box  and  typing.  When  you  finish  typing,  select 
the  text  and  use  the  options  in  the  Text  Toolbar  [see  page  123)  or  the 
Format  and  Style  menus  (see  pages  124  and  126)  to  format  the  text. 
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2 Resize  the  floating  box  to  fit  the  content  by  clicking  a resize  han- 
dle and  dragging. 

Alternatively,  you  can  resize  the  floating  box  by  specifying  the  size  in 
the  Width  and  Height  text  boxes  of  the  Floating  Box  Inspector. 


Specifying  Static  Properties  in  the  Floating 
Box  Inspector 

Use  the  Name  text  box  to  enter  a custom  name  for 
the  floating  box. 


The  Width  and  Height  options  let  you  resize  the 
floating  box  by  manual  entry. 


The  options  in  the  Background  section  let  you 
specify  a background  color  or  image. 


< 


< 


Naming  a Floating  Box 

Optionally,  you  can  click  the  default  layer  entry  in  the  Name  text  box 
and  type  a descriptive  name.  This  may  be  helpful  if  you  plan  on  us- 
ing floating  boxes  within  your  animation,  making  them  easier  to 
identify.  If  you  don’t  specify  a custom  name,  Adobe  GoLive  will  name 
all  subsequent  floating  boxes  Layer  7,  Layer 2,  Layer 3,  and  so  on. 


Choosing  a Background  Color  or  Image 


Like  a normal  HTML  page,  a floating  box  can  have  a background 
color  or  image  (otherwise  its  background  is  transparent). 

If  you  want  an  opaque  colored  background  for  the  floating  box,  pro- 
ceed as  follows: 

1 With  the  floating  box  selected,  click  the  color  field  in  the  Back- 
ground section  to  open  the  Color  Palette  (if  it  is  closed). 

2 Select  a color  from  any  tab  of  the  Color  Palette  (preferably  a Web- 
safe  color)  and  drag  it  from  the  preview  pane  of  the  Color  Palette 
onto  the  color  field  in  the  Floating  Box  Inspector. 

If  you  want  to  display  a background  image  in  the  floating  box,  pro- 
ceed as  follows: 
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1 With  the  floating  box  selected,  click  the  Image  checkbox  in  the 
Background  section.  An  Empty  Reference  entry  appears  in  the  Im- 
age text  box,  prompting  you  to  select  an  image. 

2 Use  Point  & Shoot  to  link  to  an  image  file  in  the5/'fe  Window,  type 
in  the  image  file  name  (including  the  relative  path  to  the  folder), 
or  click  the  Browse  button  to  select  an  image  in  the  subsequent 
file  selection  dialog. 

Avoid  using  a background  image  alone  in  a floating  box.  In 
Netscape  Communicator,  the  background  image  won’t  display 
if  the  floating  box  is  empty. 

Animating  a 
Floating  Box 

To  animate  a floating  box,  you  need  keyframes.  Associated  with  each 
keyframe  is  a position  relative  to  the  upper  left  corner  of  the  docu- 
ment window.  This  position  represents  the  location  of  the  floating 
box  at  a particular  time  while  the  animation  plays  back.  You  adjust 
it  by  dragging  the  floating  box  to  the  desired  location. 

Animating  a floating  box  involves  these  steps: 

• inserting  a new  keyframe  in  the  Timeline  Editor 

• specifying  a position  associated  with  the  new  keyframe 

• selecting  the  shape  of  the  animation  path  in  the  Floating  Box 
Inspector 

The  following  sections  describe  these  steps. 

3 

Inserting  a New  Keyframe 

To  insert  a new  keyframe,  proceed  as  follows: 

1 Select  the  floating  box  in  the  document  window,  either  by  click- 
ing its  outline  or  the  small  yellow  marker. 

2 Open  the  Timeline  Editor  by  clicking  the  Timeline  Editor  button 
□ above  the  main  content  area  of  the  document  window. 
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3 Initially,  the  Timeline  Editor  window  contains  only  one  time  track 
with  a single  keyframe.  Command-click  at  the  desired  position 
on  the  time  track  to  insert  a new  keyframe. 


Creating  a New  Keyframe 


The  left  and  right  locators  mark  out  the  beginning- 
and  the  end  of  the  play  range. 

Option-dick  the  first  keyframe,  then  drag  to  the 
desired  position  to  create  a new  keyframe. 

The  Time  Cursor  follows  as  you  drag,  stopping  at  - 
the  position  where  you  drop  the  new  keyframe. 


The  counter  indicates  the  position  of  the  key- 
frame  in  seconds  and  frames. 


d_j| 


MUMl  Hu  * 


■■i'KMFOKi 


15FPS  ▼M  lllll  I 


Alternatively,  you  can  Option-click  the  initial  keyframe  and  drag  to 
the  desired  position  on  the  time  track  (see  illustration  above).  The 
time  cursor  will  move  along  as  you  drag.  In  the  example  shown 
above,  it  is  dropped  at  the  position  “20  frames”  (1.05  seconds). 

4 The  new  keyframe  marks  the  end  of  the  play  range.  This  is  indi- 
cated by  the  right  play  range  locator  □,  which  moves  along  as 
you  drag  the  keyframe.  If  you  insert  more  keyframes,  the  key- 
frame  furthest  to  the  right  always  limits  the  play  range. 


Specifying  the  Position  Within  the  Document  Window 


A Floating  Box  Positioned  via 
Keyframe  Selection 


This  is  the  start  point  of  the  animation,  as  marked 
by  the  first  keyframe. 


To  specify  the  position  of  the  floating  box  for  the  new  keyframe,  pro- 
ceed as  follows: 

1 Click  the  new  keyframe  to  select  it,  then  go  to  the  document  win- 
dow and  drag  the  floating  box  to  the  position  where  you  want  it 
to  appear  after  20  frames  have  played  back.  Your  document  win- 
dow should  now  resemble  the  example  below. 


This  is  the  end  point  of  the  animation,  as  marked 
by  the  new  keyframe  at  20  seconds. 
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1 FPS 

2 FPS 

3 FPS 

4 FPS 

5 FPS 
8 FPS 
10  FPS 
12  FPS 


20  FPS 

24  FPS 

25  FPS 
50  FPS 


Alternatively,  you  can  also  enter  the  desired  position  in  the  Left  and 

Top  text  boxes  of  the  Floating  Box  Inspector. 

2 Click  the  first  keyframe.  The  floating  box  returns  to  its  start  posi- 
tion. (Although  you  could  change  its  position  in  the  same  way  as 
described  in  the  preceding  step,  we’ll  leave  the  first  keyframe 
and  its  associated  floating  box  position  unchanged  to  better 
demonstrate  the  point.) 

3 Click  the  Play  button  ED  at  the  bottom  of  the  Timeline  Editor  win- 
dow to  preview  your  animation.  The  floating  box  will  start  trav- 
eling across  the  document  window  from  left  to  right.  It  will  stop 
at  the  position  you  chose  in  step  1 above. 

4 The  time  cursor  will  also  stop  at  the  right  play  range  locator  □. 
Click  the  Stop  button  Ql]  to  reset  the  time  cursor  back  to  zero,  or 
use  the  Backward  button  [<n  to  return  the  time  cursor. 

5 If  desired,  you  can  use  the  Loop  and  Palindrome  buttons  at  the 
lower  left  corner  of  the  Timeline  Editor  window  to  control  the  loop- 
ing behavior: 

- The  Coop  button  IcLdI  plays  your  animation  in  a simple  endless 
loop.  When  reaching  the  end  point  of  the  animation  path,  the 
floating  box  jumps  back  to  the  start  and  resumes  traveling,  re- 
peating this  cycle  infinitely. 

- With  the  Palindrome  button  !«=*!  clicked,  the  floating  box 
bounces  back  and  forth  between  the  start  and  end  points  of 
the  animation  path.  (The  Loop  button  must  be  clicked  to  en- 
able the  Palindrome  button.) 

6 If  you  want  to  change  the  playback  speed,  select  another  option 
from  the  FPS  menu  at  the  bottom  of  the  Timeline  Editor  window. 
The  default  75  FPS  setting  is  what  most  browsers  can  handle  in 
terms  of  speed,  even  if  running  on  systems  with  average  video 
hardware.  If  you  wantto  work  with  higher  speeds,  be  sure  to  test- 
view  your  animation  with  a wide  selection  of  system  configura- 
tions to  make  sure  that  playback  is  smooth. 


Selecting  the  Shape  of  the  Animation  Path 


To  select  the  shape  of  the  animation  path,  proceed  as  follows: 

1 Select  the  floating  box  inserted  in  the  previous  section. 

2 Go  to  the  Timeline  Editor  and  insert  a new  keyframe.  Place  it  right 
in  the  middle  between  the  two  existing  keyframes — forexample, 
at  the  position  “10  frames”. 
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A Floating  Box  on  a Curved 
Animation  Path 


By  inserting  a keyframe  in  the  middle,  the  anima- 
tion path  is  now  subdivided  in  two  sections.  Both 
sections  are  curved. 


This  is  the  middle  point  of  the  animation,  as 
marked  by  the  new  keyframe  at  10  seconds. 


None 

Linear 

1 

• Curve 

I Random 

3 Drag  the  floating  box  to  the  position  where  you  want  it  to  appear 
after  10  frames  have  been  played  back — for  example,  right  in  the 
middle  between  the  start  and  end  points  of  the  animation  path, 
(see  example  below). 

4 With  the  keyframe  in  the  middle  still  selected,  drag  the  floating 
box  down — for  example,  by  100  pixels.  Your  document  window 
should  now  resemble  the  example  below. 


□ untitled  3 ED  Ei 

Layout  □ ) [Q  ) Source  [t]  ) [g  ) Q7]  ) Preview  □ ) [Q  ) 

D>  [g)  Welcome  to  Adobe  CyberStudio  1^ 

* 

a 

<1  M 548  - 

5 Select  the  two  outer  keyframes  one  at  a time  and  drag  the  float- 
ing box  beyond  the  edge  of  the  document  window.  This  will 
smooth  the  curved  path  you  are  going  to  select  in  the  following 
step. 

6 Select  the  first  keyframe  and  choose  Curve  from  the  Animation 
menu  in  the  Floating  Box  Inspector.  This  selection  determines  the 
curve  shape  between  the  current  keyframe  and  the  one  that  fol- 
lows next  on  the  time  track. 

7 Select  both  the  first  and  second  keyframes  one  more  time  and  set 
the  shape  of  the  animation  path  to  Random. 

8 Click  the  Play  button  QH  in  the  Timeline  Editorto  preview  your  an- 
imation. The  floating  box  will  travel  along  an  irregular  zig-zag  path 
now. 


Instead  of  selecting  and  editing  keyframes  one  by  one,  you  can  also 
Shift-click  them  successively,  drag-select,  or  choose  Select  All  from 
the  Edit  menu  to  apply  a common  setting,  such  as  a curved  anima- 
tion path. 
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Shortcut:  Creating  a New  Keyframe  by  Dragging 


After  creating  an  animation  with  at  least  two  keyframes,  you  can  use 
a mouse  shortcut  to  insert  more  keyframes  and  position  the  floating 
box  in  one  go.  This  shortcut  lets  you  insert  keyframes  anywhere  be- 
tween any  two  existing  keyframes  on  the  time  track. 

To  insert  a keyframe  using  the  Alt-drag  mouse  shortcut,  proceed  as 
follows: 

1 Go  to  the  Timeline  Editor  and  drag  the  time  cursor  to  the  desired 
position  in  time  where  you  want  to  insert  a new  keyframe. 

2 Return  to  the  document  window.  The  floating  box  has  moved  to 
the  desired  position  on  the  animation  path. 

3 Alt-click  the  floating  box  and  drag  it  to  the  desired  position.  This 
inserts  a new  keyframe  on  the  time  track. 


Recording  an  Animation  Path 


Instead  of  inserting  keyframes  one  by  one  and  specifying  their  posi- 
tions, you  can  also  record  an  animation  path.  You  start  recording  an 
animation  path  with  the  initial  keyframe  present  after  opening  the 
Timeline  Editor. 

To  record  an  animation  path,  proceed  as  follows: 

1 Click  the  Record  button  !©■!  in  the  Floating  Box  Inspector. 

2 Go  to  the  document  window  and  drag  the  floating  box  along  the 
desired  path. 

3 Adobe  GoLive  will  insert  a keyframe  at  each  major  turn  in  the 
path. 

4 Click  each  keyframe  and  correct  the  position. 

Now  that  you  have  mastered  a single-object  animation  with  all  of 
Adobe  GoLive’s  linear,  curved,  and  random  path  options,  you  can 
turn  to  more  complex  animations. 


With  the  Timeline  Editor,  you  can  drag  and  select  all  at  once  and 
apply  curve  to  all  at  one  time. 


Working  with  Multiple  Floating  Boxes 
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Working  with 
Multiple  Floating 
Boxes 


To  animate  multiple  objects  on  the  same  page,  you  need  to  specify 

some  advanced  dynamic  properties: 

• adding  a new  floating  box  in  the  document  window  (see  Insert- 
ing a Floating  Box  on  page  251) 

• inserting  keyframes  in  the  Timeline  Editor  (see  Inserting  a New 
Keyframe  on  page  254) 

• specifying  a position  for  each  new  keyframe  (see  Specifying  the 
Position  Within  the  Document  Window  on  page  255) 

• indicating  the  stacking  order  in  the  Floating  Box  Inspector 
(optional) 

• specifying  visibility  in  the  Floating  Box  Inspector  (optional) 

The  following  sections  discuss  these  steps. 


Inserting  a Second  Floating  Box  and  Creating  More  Keyframes 


To  insert  a second  floating  box  and  create  more  keyframes,  proceed 

as  follows: 

1 Insert  a second  floating  box  in  the  document  window,  as  speci- 
fied further  above.  Note  the  number  “2”  at  the  lower  right  corner 
of  the  floating  box,  indicating  that  this  is  the  second  floating  box 
inserted  in  the  page. 

2 Add  content — for  example,  by  typing  text  and  formatting  it. 

3 A new  track  appears  in  the  Timeline  Editor,  also  numbered  “2”. 
(Each  floating  box  in  the  document  window  has  a corresponding 
time  track  in  the  Timeline  Editor  with  the  same  number.) 

4 Insert  a new  keyframe  on  time  track  #2. 

5 Click  the  first  keyframe  on  time  track  #2  and  drag  the  floating 
box  to  the  upper  right  corner  of  the  document  window.  Click  the 
second  keyframe  and  drag  the  floating  box  to  the  lower  left  cor- 
ner of  the  docu  ment  window.  Leave  the  Linear  path  shape  option 
selected.  Your  document  window  should  now  resemble  follow- 
ing example. 
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Two  Floating  Boxes  in  the 
Same  Document 


This  floating  box  travels  along  a curved  path. 


This  floating  box  travels  along  a linear  path. 


6 Ifyou  are  not  satisfied  with  the  result,  clickany  keyframe  on  time 
track  #1  or  #2  and  drag  the  floating  box  to  reposition  it.  When 
you  click  a keyframe,  an  arrow  moves  along  with  your  selection 
to  indicate  the  current  time  track  (see  below).  The  Timeline  Editor 
should  resemble  the  example  below. 


The  Timeline  Editor  with 
Two  Time  Tracks 


The  small  arrow  indicates  the  time  track  that  con- 
tains the  currently  selected  keyframe. 

The  bold  outline  indicates  that  the  keyframe  is 
currently  selected. 


Bear  in  mind  that  the  time  track  in  the  Timeline  Editor  repre- 
sents the  motion  of  a floating  box  over  time  (always  from  left 
to  right),  not  the  direction  of  motion  in  the  document  window. 
You  determine  that  direction  by  clicking  all  keyframes  succes- 
sively and  dragging  the  floating  box  to  new  position  within  the 
document  window.  For  example,  by  selecting  the  first  keyframe 
in  a time  track  and  dragging  the  floating  box  to  the  right  edge 
of  the  window,  you  specify  that  the  animation  is  to  start  from 
the  right-hand  side  of  the  browser  window.  When  you  preview 
the  animation,  don’t  be  confused  by  the  directions  of  motion 
being  opposed  in  both  windows. 
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Managing  Multiple  Floating  Boxes  Using  the  Floating  Box 
Controller 

The  Floating  Box  Controller  is  an  auxiliary  window  that  helps  you 
manage  multiple  layered  floating  boxes  in  your  document  window. 
Intended  to  assist  you  in  editing  pages  with  multiple  floating  boxes, 
it  lets  you  show  or  hide  and  lock  or  unlock  floating  boxes  temporari- 
ly. 


The  settings  you  make  in  the  Floating  Box  Controller  do  not 
change  the  code  of  your  animation.  They  are  only  temporary 
and  will  be  overridden  when  you  click  the  Play  button  in  the 
Timeline  Editor  or  switch  document  views. 


The  Floating  Box  Controller 


Click  the  “eye”  symbol  to  hide  or  show  the  content 
of  a floating  box. 

Click  the  “pen”  symbol  to  lock  or  unlock  a floating 
box. 

Click  the  name  to  bring  a floating  box  to  the  fore- 
ground. 


The  “padlock”  symbol  lets  you  pre- 
serve the  settings  made  in  the  Float- 
ing Box  Controller  when  you  click 
the  Play  button  in  the  Timeline  Edi- 
tor or  switch  views. 


To  manage  multiple  floating  boxes  in  a document  window,  proceed 

as  follows: 

1 Choose  Floating  Box  Controller  from  the  Window  menu. 

2 The  Floating  Box  Controller  appears,  listing  the  floating  boxes 
present  in  the  active  window. 

3 Click  the  name  (Layer,  Layer  1,  etc.,  or  custom  name)  to  activate 
a floating  box  in  the  document  window  and  bring  it  to  the  front. 
Clicking  the  name  of  a floating  box  temporarily  overrides  the 
hide/show  and  lock/unlock  statuses  explained  below  and  allows 
editing. 

4 Click  the  “eye”  symbol  to  hide  or  show  the  content  of  a floating 
box,  or  press  the  Control  key  and  click  any  “eye”  symbol  to  hide 
or  show  all  floating  boxes  at  once.  The  “eye”  symbol  reflects  the 
show/hide  status  as  follows: 

Black  indicates  that  the  floating  box  is  visible. 
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- Grayed  out  indicates  that  the  floating  box  is  invisible. 

Red  indicates  that  the  temporary  show/hide  settings  you 
have  made  in  the  Floating  Box  Controller  conflict  with  the  cur- 
rent visibility  status  of  the  floating  box  (see  Controlling  Visibil- 
ity on  page  266),  as  set  in  the  Floating  Box  Inspector  for  a 
particular  keyframe.  For  example,  the  “eye”  symbol  is  red  if 
you  have  hidden  a floating  box  in  the  Floating  Box  Controller 
that  is  supposed  to  be  visible  in  the  animation. 

Please  note  that  red  indicates  a conflict  rather  than  an  error. 
Your  animation  will  still  play  back  without  any  problems. 

5 Click  the  “pen”  symbol  to  lock  or  unlock  a floating  box,  or  press 
the  Control  key  and  click  any  “pen”  symbol  to  lock  or  unlock  all 
floating  boxes  in  one  go.  When  locked,  the  pen  symbol  is  grayed 
out  in  the  Floating  Box  Controller,  and  you  cannot  drag  the  float- 
ing box  around  or  edit  its  content  in  the  document  window. 

6 The  “padlock”  symbol  in  the  upper  right  corner  of  the  Floating 
Box  Controller  allows  you  to  preserve  all  temporary  hide/show 
and  lock/unlock  settings  when  you  click  the  Play  button  in  the 
Timeline  Editor  or  switch  views — for  example,  from  Layout  to 
Source  and  back. 

Using  the  Stacking  Order  to  Simulate  Relative  Motion 

The  stacking  order,  also  known  as  the  z-index,  is  a unique  property 
of  floating  boxes.  The  graphic  Stacked  Boxes  and  Their Z-Indices  on 
page  215  illustrates  the  effect  of  the  z-index  property.  In  animations 
with  multiple  objects,  you  can  use  this  property  to  determine  which 
object  should  be  displayed  on  top  when  the  paths  of  two  or  more 
floating  boxes  cross.  You  can  also  use  the  stacking  order  to  simulate 
more  complex  effects  of  relative  motion — for  example,  by  letting 
one  floating  box  revolve  around  another. 

Like  the  other  properties  a floating  box  can  have,  you  can  control  the 
stacking  order  for  the  time  span  between  any  two  keyframes  on  the 
same  time  track.  To  produce  the  visual  effect  of  stacking,  however, 
this  property  needs  to  be  set  for  at  least  two  synchronous  or  overlap- 
ping time  spans  on  two  different  time  tracks  within  the  same  scene. 
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Simulating  Relative  Motion 


The  following  example  is  based  on  a simple  animation  that  simu- 
lates relative  motion.  It  is  a palindrome  that  consists  of  two  objects: 
a stationary  floating  box  with  a GIF  image  (called  the  “image  box”  in 
the  following  example)  and  an  animated  floating  box  with  text  con- 
tent (referred  to  as  the  “text  box”,  not  to  be  confused  with  a layout 
text  box). 


Floating 

through 


Phase  1: 

From  the  start 
point,  the  text  box 
moves  in  from  the 
left. 


Phase  2: 

The  text  box  moves 
across  the  station- 
ary image  box. 


Phase  3: 

The  text  box  moves 
to  the  right. 


Phase  4: 

On  its  way  back  to 
the  start  point,  the 
text  box  is  con- 
cealed by  the  im- 
age box. 


Four  keyframes,  each  on  two  time  tracks,  control  the  animation,  sub- 
dividing it  in  four  phases.  The  following  happens  when  you  play  it 
back: 

• Phase  V.  The  text  box  is  on  top  while  moving  in  from  the  start 
position. 

• Phase 2:  The  text  box  is  still  on  top  while  moving  across  the 
image  box. 

• Phase  3:  The  text  box  is  also  on  top  while  moving  to  the  right, 
away  from  the  image  box. 

• Phase  4:  The  text  box  is  concealed  behind  the  image  box  while 
moving  back  to  its  start  position. 


The  following  section  describes  how  to  create  an  animation  with  one 

stationary  object  and  an  animated  object  revolving  around  it. 

To  create  those  objects  and  control  the  stacking  order,  proceed  as  fol- 
lows: 

1 Insert  two  floating  boxes  and  add  content — for  example,  an  im- 
age to  one  box  and  formatted  text  to  the  other. 

Now,  you’re  going  to  make  the  image  box  a stationary  object: 

2 Select  the  image  box  and  place  four  keyframes  on  its  time  track 
in  the  Timeline  Editor. 

3 Select  the  first  keyframe  of  the  image  box,  then  drag  the  image 
box  to  a convenient  location — for  example,  in  the  center  of  the 
page.  The  image  box  serves  as  the  pivot  point,  so  it  must  remain 
stationary. 
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4 Repeat  step  3 above  for  the  remaining  keyframes.  Make  sure  that 
the  position  is  the  same  for  all  four  keyframes  to  prevent  the  im- 
age box  from  jumping  during  playback.  If  in  doubt,  click  all  four 
keyframes  and  check  the  positions  in  the  Top  and  Left  text  boxes 
of  the  Floating  Box  Inspector.  Correct  any  pixel  offset  by  hand-ed- 
iting the  Topand  Left  coordinates  for  each  keyframe,  if  necessary. 

5 Click  the  Loop  l<±j|  and  Palindrome  |g^l  buttons  in  the  Timeline 
Editor  to  play  the  animation  in  an  endless  loop. 

6 Click  the  Play  button  DU  to  preview  the  stationary  object.  The  im- 
age box  shouldn’t  move  anymore.  If  there  is  still  pixel-wise  mo- 
tion, return  to  step  4 above  and  correct  the  Top  and  Left 
coordinates. 

Now,  you  are  going  to  insert  four  keyframes  and  assign  each  a posi- 
tion of  the  text  box  within  the  document  window: 

7 Select  the  text  box  and  insert  four  keyframes  on  its  time  track  in 
the  Timeline  Editor.  Place  each  keyframe  directly  below  its  coun- 
terpart in  the  time  track  of  the  image  box  to  ensure  that  both 
tracks  are  properly  synchronized.  The  Timeline  Editor  window 
should  look  like  this  now. 

Timeline  Editor  with  Two  Time  Tracks 


There  are  two  time  tracks  in  the  Timeline  Editor 
now.  Each  time  track  holds  four  keyframes. 


8 Select  the  first  keyframe  of  the  text  box,  then  drag  the  text  box  to 
a position  to  the  left  of  the  image  box,  aligning  it  vertically  with 
the  center  of  the  image  box. 

9 Select  the  second  keyframe  of  the  text  box,  then  drag  the  text  box 
horizontally  on  top  of  the  image  box. 

10  Select  the  third  keyframe  of  the  text  box,  then  drag  the  text  box 
horizontally  to  the  right  of  the  image  box. 

11  Select  the  last  keyframe  of  the  text  box,  then  drag  the  text  box 
horizontally  on  top  of  the  image  box. 

Next,  you’ll  define  the  stacking  order  for  all  four  keyframes — both 

for  the  text  box  and  image  box.  Here’s  how: 
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12  Return  to  the  first  keyframe  of  the  text  box,  then  go  to  the  Float- 
ing Box  Inspector  and  enter  “2”  in  the  Depth  text  box  (see  the  fol- 
lowing screenshot). 

13  Select  the  first  keyframe  of  the  image  box  and  enter  “1”  in  the 
Depth  text  box  of  the  Floating  Box  Inspector. 


Setting  the  Stacking  Order  in  the 
Floating  Box  Inspector 

The  current  coordinates  appear  here. 

This  option  controls  the  stacking  order. 
This  option  controls  visibility. 


Select  an  option  from  this  popup  menu  to 
mine  the  shape  of  the  animation  path. 

Use  this  option  to  select  a keyframe  color. 


deter- 


14  You  have  now  stacked  the  text  box  on  top  of  the  image  box.  How- 
ever, this  stacking  order  is  only  in  place  for  the  time  span  after 
the  first  keyframe,  so  repeat  steps  12  and  13  above  for  the  second 
and  third  keyframes. 

1 5 Select  the  last  keyframe  of  the  text  box. 

16  Go  to  the  Floating  Box  Inspector  and  enter  “1”  in  the  Depth  text 
box. 

17  Select  the  last  keyframe  of  the  image  box  and  enter  “2”  in  the 
Depth  text  box  of  the  Floating  Box  Inspector. 

18  You  have  now  reverted  the  stacking  order  for  the  time  span  after 
the  last  keyframe. 

19  Click  the  Play  button  XI  to  preview  your  animation.  On  returning 
from  the  point  of  the  animation  path  that  is  furthest  to  the  right, 
the  text  box  should  disappear  behind  the  image  box. 
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Controlling  Visibility 

The  visibility  property  lets  you  hide  an  object  during  the  time  span 

between  any  two  keyframes.  There  are  three  major  reasons  for  work- 
ing with  temporarily  invisible  floating  boxes: 

• You  can  make  objects  appear  “out  of  the  blue”  to  create  a more 
lively  impression  of  your  animation. 

• In  animations  with  multiple  images,  it  is  advantageous  to  hide 
all  objects  initially  while  the  browser  is  still  downloading  the 
page,  then  start  the  animation  after  the  download  is  complete. 
This  helps  to  avoid  the  choppy  look  that  may  result  from  the 
browser  still  downloading  pages  while  the  animation  has 
already  started  playing  back. 

• When  you  use  an  action  to  switch  the  content  of  an  image  in  an 
animated  scene,  it  is  good  practice  to  hide  that  image  while  the 
action  is  running.  If  it  remains  visible,  this  may  cause  choppy 
animation  while  the  browser  is  downloading  the  new  image 
from  the  Web  server. 

To  hide  a floating  box  from  view,  proceed  as  follows: 

1 Click  the  keyframe  from  which  you  want  to  hide  the  floating  box. 

2 Go  to  the  Floating  Box  Inspector  and  deselect  the  Visible  check- 
box. 

3 If  desired,  repeat  both  steps  for  the  next  keyframe. 

4 Click  the  Play  button  XI  to  preview  your  animation.  The  floating 
box  should  temporarily  disappear  now. 

Inserting  Actions  in 
Your  Animation 

The  Actions  Track  in  the  Timeline  Editor  lets  you  Command-click  to 
insert  action  markers.  You  can  connect  these  markers  with  scripted 
actions  available  from  the  Actions  menu  in  the  companion  Action  In- 
spector. For  detailed  instructions  on  using  actions  with  the  Timeline 
Editor,  please  refer  to  Part  13  — Using  Actions,  starting  on  page  269. 

Using  Multiple  Scenes 
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Using  Multiple  Scenes  Adobe  GoLive’s  Timeline  Editor  tool  lets  you  save  multiple  scenes  with 

each  document.  All  scenes  share  the  same  document  window,  but 
they  use  different  “actors"  (or  floating  boxes)  that  travel  along  sepa- 
rate animation  paths.  Scenes  make  your  animations  more  flexible 
and  easier  to  handle.  You  can  play  them  back  simultaneously,  or 
start  and  stop  individual  scenes  through  scripted  actions.  You  can 
have  the  browser  autoload  scenes  (the  default  setting),  use  scripted 
actions  to  trigger  playback,  or  let  the  user  select  a scene  by  clicking  a 
button. 


Rename  Scene.  ^ 
Delete  Scene 

• Scene  1 
Scene  2 


To  create  multiple  scenes,  proceed  as  follows: 

1 Create  an  animation  as  outlined  in  the  preceding  sections.  The 
first  animation  you  create  in  a document  window  is  named 
Scene  7 by  default. 

2 Choose  the  New  Scene. ..  command  from  the  Scenes  Menu  in  the 
upper  left  corner  of  the  Timeline  Editor. 

3 A dialog  box  appears,  prompting  you  to  name  the  new  scene. 


4 Enter  a descriptive  name  and  click  OK  to  have  Adobe  GoLive  cre- 
ate a new  scene. 

5 Note  that  the  time  tracks  in  the  Timeline  Editor  haven’t  changed. 
The  keyframes  for  the  first  animation  still  exist;  they  are  used  in 
the  first  scene  you  have  created.  Leave  them  unchanged  while 
you  are  working  on  Scene  2.  (To  edit  them,  go  to  the  Scenes  Menu 
and  switch  back  to  the  first  scene.) 

6 Add  and  animate  floating  boxes  for  the  new  scene,  as  outlined  in 
the  preceding  sections,  then  preview  the  entire  animation  by 
clicking  the  Play  button  in  the  Timeline  Editor. 

Having  created  two  scenes,  you  may  now  want  to  coordinate  play- 
back. By  default,  scenes  are  set  to  Autoplay — that  is,  all  scenes  play 
back  after  the  browser  finishes  loading  the  page.  If  you  want  to  have 
them  played  back  one  by  one,  instruct  the  browser  to  switch  to  the 
second  scene  after  the  first  has  completed  playing  back.  To  do  this, 
disable  the  autoplay  option  for  the  second  scene  and  insert  a Play 
Scene  action  on  the  Actions  Track  of  the  first  scene.  (If  the  first  scene 
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The  Action  Inspector 


is  a looped  animation  or  palindrome,  insert  a Play  Scene  action  fol- 
lowed by  a Stop  Scene  action.) 

To  have  the  browser  switch  to  the  second  scene  during  playback, 
proceed  as  follows: 

1 Go  to  Scene  2 and  click  the  Autoplay  button  !<&*!  to  disable  auto- 
matic playback. 

2 Return  to  Scene  1 and  Command-click  the  Actions  Track  any- 
where before  the  last  keyframe  position  to  insert  an  action  mark- 
er (indicated  by  a question  mark  icon  ■). 

3 Go  to  the  Action  Inspector  and  choose  Play  Scene  from  the  Actions 
menu,  then  enter  the  name  of  the  scene  in  the  Name  text  box. 
The  Play  Scene  action  instructs  the  browser  to  switch  to  the  spec- 
ified scene  after  finishing  playback  of  the  current  scene. 


4 On  the  Actions  Track,  the  Play  Scene  action  icon  fS  replaces  the 
marker. 

5 If  the  first  scene  is  a looped  animation  or  a palindrome,  Com- 
mand-click the  Actions  Track  at  the  very  last  keyframe  and  insert 
a Stop  Scene  action.  The  Stop  Scene  action  icon  appears. 

The  Stop  Scene  action  stops  the  playback  of  a scene,  even  if  it  is 
an  endless  loop.  Be  sure  to  insert  this  action  after  the  Play  Scene 
action;  otherwise,  the  animation  stops  before  scenes  can  be 
switched. 

6 Return  to  the  first  scene  and  preview  the  animation  in  the  brows- 
er. Scenes  should  be  switched  during  playback  now. 

7 You  can  continue  to  add  more  scenes  and  automate  playback  as 
outlined  above. 
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Alternatively,  to  give  visitors  more  control  over  your  animation,  you 
can  also  attach  the  Play  Scene  action  to  a button  image  or  hyperlink 
text  in  the  Layout  view.  For  detailed  instructions  on  using  actions 
with  button  images  and  text,  see  Part  13  — Using  Actions,  starting  on 
page  269. 


Part  13 — Using  Actions 

In  Part  13,  you’ll  find  a complete  reference  of  the  scripted  actions 
that  Adobe  GoLive  supports,  complete  with  instructions  for  using  the 
respective  Inspectors  set  them  up  and  tips  about  when  to  use  them. 

After  the  General  section,  which  describes  where  and  how  you  can 
use  actions  to  control  animations,  the  following  sections  describe  the 
actions  that  Adobe  GoLive  supports: 

• Get  Form  Value  (see  page  275)  reads  the  current  content  of  a 
form  text  field. 

• Get  Floating  Box  Position  (see  page  276)  reads  the  current  posi- 
tion of  a floating  box. 

• Preload  Image  (see  page  277)  makes  the  browser  cache  the  com- 
ponent images  of  a button  image  before  building  the  page  dis- 
play. 

• Random  Image  (see  page  278)  swaps  the  content  of  an  image  in 
a random  sequence. 

• Set  Image  URL  (see  page  280)  lets  you  swap  the  content  of  a 
plain  image. 

• Go  Last  Page  (see  page  281)  jumps  to  the  page  visited  last. 

• Goto  Link  (see  page  282)  jumps  to  a specified  URL. 

• Navigate  Flistory  (see  page  283)  jumps  to  a specified  page  in  the 
browser’s  history  window. 

• Open  Window  ( see  page  284)  opens  a second  browser  window. 

• Document  Write  (see  page  285)  replaces  an  Inline  Action  Item 
with  text  or  HTML  code,  a value  supplied  by  an  action,  or  the 
value  of  a variable. 

• Open  Alert  Window  (see  page  286)  displays  a custom  alert  mes- 
sage in  the  browser. 

• Set  Status  (see  page  287)  displays  a custom  message  in  the  status 
line  of  the  browser. 

• Drag  Floating  Box  enables  the  visitor  to  drag  an  object  in  a float- 
ing box  across  the  browser  window  and  drop  it  anywhere  on  the 
page  (see  page  288). 
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• Flip  Move  (see  page  289)  moves  a floating  box  between  two  alter- 
native positions. 

• Move  By  (see  page  290)  moves  a floating  box  horizontally  and/or 
vertically. 

• Move  To  (see  page  292)  moves  a floating  box  to  a user-specified 
position. 

• Play  Scene  & Stop  Scene  (see  page  293)  lets  you  control  the  play- 
back of  scenes. 

• Play  Sound  & Stop  Sound  (see  page  294)  lets  you  control  the 
playback  of  audio  tracks. 

• Show  Hide  (see  page  296)  controls  the  visibility  of  floating  boxes. 

• Stop  Complete  (see  page  297)  stops  all  animations  and  audio 
tracks. 

• Wipe  Transition  (see  page  297)  wipes  objects  in  a floating  box  “in 
and  out”  using  a smooth  visual  transition. 

• Netscape  CSS  Fix  ( see  page  299)  is  a workaround  script  for  several 
program  errors  in  Netscape  Navigator. 

• Resize  Window  (see  page  300)  lets  you  dynamically  set  the  size  of 
the  browser  window. 

• Scroll  Down,  Left,  Right,  Up  (see  page  300)  scroll  the  content  of 
the  browser  window  to  the  left,  the  right,  up  or  down. 

• Set  Back  Color  (see  page  301)  sets  the  background  color  of  a 
page. 

• Condition  (see  page  302)  monitors  the  browser  window  for  a sin- 
gle-shot event  and  triggers  an  action  when  a specified  condition 
is  fulfilled. 

• Action  Group  (see  page  303)  allows  for  grouping  multiple  actions 
and  run  them  all  at  the  same  time. 

• The  Idle,  Intersection,  and  Timeout  actions  (see  page  305  and  fol- 
lowing) interwork  to  monitor  the  browser  window  for  a certain 
event  and  trigger  an  action  when  a specified  condition  is  ful- 
filled. 

• Call  Action  (see  page  304)  calls  an  action  to  be  executed  from  the 
head  section  of  the  page. 

• Call  Function  (see  page  305)  calls  a function  from  the  head  sec- 
tion of  the  page  or  an  external  JavaScript  library. 

• Key  Compare  (see  page  308)  launches  an  action  when  the  visitor 
hits  a selected  key. 

• Declare  Variable  (see  page  310)  lets  you  declare  a variable.  Each 
variable  has  a well-defined  data  type,  which  represents  a typical 
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property  of  an  object  in  the  browser  window.  You  can  name 
each  variable  and  assign  any  of  the  following  values:  string, 
floating  point  value,  URL,  color,  layer  (floating  box)  position, 
image  URL,  etc. 

• Init  Variable  (see  page  311)  lets  you  assign  an  initial  value  to 
each  variable  when  the  page  loads. 

• Read  Cookie  (see  page  312)  reads  the  content  of  a cookie  saved 
to  the  visitors  hard  disk  using  the  Write  Cookie  action. 

• Set  Variable  (see  page  314)  lets  you  dynamically  assign  a value  to 
a variable  at  runtime. 

• Test  Variable  (see  page  313)  reads  the  current  value  of  a variable. 

• Write  Cookie  (see  page  315)  saves  the  value  of  a variable  in  a 
cookie  on  the  visitor’s  hard  disk,  thus  making  it  persistent. 


General  Adobe  GoLive  comes  with  a complete  set  of  ready-to-use  scripted  ac- 

tions that  are  fully  compatible  with  the  4.x  releases  of  Netscape  Nav- 
igator and  Microsoft  Internet  Explorer.  Some  actions  work  with  3.0 
browsers.  You  can  attach  actions  to  animations  created  with  the 
Timeline  Editor,  button  images,  linked  normal  images,  and  hyper- 
links created  with  the  Text  Inspector.  To  specify  an  action,  choose  an 
item  from  the  Actions  menu,  which  is  available  in  three  places 
throughout  Adobe  GoLive: 

• the  Action  Inspector  that  appears  when  you  insert  an  action 
marker  on  the  Actions  Track  of  the  Timeline  Editor  or  an  action 
item  from  the  Palette  into  the  head  section  of  the  page  (see 
Action  Item  on  page  246) 

• the  Actions  tabs  of  the  Button  Inspector,  Image  Inspector,  and 
Clickable  Image  Inspector 

• the  Actions  tab  of  the  Text  Inspector 
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The  Actions  Menu 

The  Actions  menu  is  a hierarchical  menu  with  six  topical  submenus 
(see  below). 


The  Actions  Menu 


| ? Action  T 

Getters  ► 

Image  ► 

Link  ► 

Message  ► 

Multimedia  ► 

Drag  Floating  Box 
IjS)  Flip  Move 
Q Move  By 
E)  Move  To 
Play  Scene 
|*4  Play  Sound 

Others  ► 

Specials  ► 

Variables  ► 

!■]  ShowHide 

1(3  S*°P  Complete 
Stop  Scene 
Stop  Sound 
|^|  Vipe  Transition 

The  actions  in  the  eight  submenus  represent  the  following  catego- 
ries: 

• Getters:  The  actions  in  this  category  read  and  store  the  value  of 
an  object  in  the  browser  window  (see  Get  Form  Value  on 

page  275  and  the  following  section). 

• Image:  The  actions  in  this  category  let  you  control  the  appear- 
ance of  images  (see  Preload  Image  on  page  277  and  the  follow- 
ing sections). 

• Link:  The  actions  in  this  category  can  be  used  to  control  the  con- 
tent of  the  browser  window,  for  example  by  replacing  the  active 
Web  page  (see  Goto  Link  on  page  282  and  the  following  sec- 
tions). 

• Message:  The  actions  in  this  category  can  be  used  to  generate  an 
HTML  page  “on  the  fly”  and  give  hints  or  instructions  to  the  visi- 
tor (see  Document  Write  on  page  285,  Open  Alert  Window  on 
page  286,  and  Set  Status  on  page  287). 

• Multimedia:  The  actions  in  this  category  (see  page  288  and  fol- 
lowing pages)  control  multimedia  items,  such  as  scenes  in  the 
Timeline  Editor,  objects  in  Floating  Boxes,  and  audio  file  play- 
back. 

• Others:  This  category  contains  miscellaneous  actions  (see 
page  299  and  following  pages)  that  fix  program  errors  in  brows- 
ers, scroll  the  page  content,  and  set  the  size  and  background  color 
of  the  browser  window. 
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• Specials:  The  actions  in  this  category  (see  page  302  and  following 
pages)  can  be  used  to  monitor  the  browser  window  for  certain 
events  and  control  other  actions.  Also  contained  in  this  category 
is  an  action  that  triggers  multiple  actions  at  the  same  time. 

• Variables : The  actions  in  this  category  (see  page  page  309)  allow 
Web  authors  to  use  variables  as  an  input  to  other  scripted 
actions,  replacing  settings  you  would  make  in  the  respective 
Inspector. 

Action  Triggers 

For  an  action  to  run,  it  needs  a trigger: 

• In  the  Timeline  Editor  (page  232),  actions  are  triggered  automati- 
cally depending  on  their  position  relative  to  the  time  track. 

• In  the  Actions  tabs  of  the  Button  Image  Inspector,  Image  Inspec- 
tor, Clickable  Image  Inspector,  and  Text  Inspector,  you  must  spec- 
ify an  event  trigger.  Six  mouse  events  and  two  key  events  are 
available: 

- Mouse  Click  triggers  an  action  after  a single  mouse  click  on  a 
button  image  or  text. 

- Mouse  Enter  triggers  an  action  when  the  mouse  pointer  is 
moved  over  a button  image  or  text. 

- Mouse  Exit  triggers  an  action  when  the  mouse  pointer  is 
moved  away  from  a button  image  or  text. 

- Double  click  triggers  an  action  when  the  user  double-clicks  a 
button  image  or  text. 

- Mouse  down  triggers  an  action  when  the  user  presses  the 
mouse  button  while  the  cursor  is  on  a button  image  or  text. 

- Mouse  up  triggers  an  action  when  the  user  releases  the  mouse 
button  while  the  cursor  is  on  a button  image  or  text. 

- Key  down  and  Key  press  trigger  an  action  when  the  user 
presses  any  key. 

- Key  up  triggers  an  action  when  the  user  releases  any  key. 
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• The  head  section  of  the  page  provides  additional  options  for 
triggering  actions.  The  Action  Inspector  features  a popup  menu 
(see  below)  that  lets  you  specify  when  and  how  an  action  in  the 
head  section  should  be  executed. 


The  Exec  Popup  Menu  in  the  Action 
Inspector 

This  popup  menu  lets  you  specify  when  and  how 
an  action  should  be  executed. 


This  text  box  lets  you  name  an  action 
you  want  to  call  using  the  Call  Action  ac- 
tion. 


The  Exec  popup  menu  offers  the  following  options: 

- OnLoad  (default  option):  Triggers  the  action  when  the  brows- 
er loads  the  page.  This  is  the  default  behavior  already  imple- 
mented in  previous  versions  of  Adobe  GoLive. 

- OnUnload:  Triggers  the  action  when  the  browser  leaves  the 
page. 

- OnParse:  This  is  a special  trigger  that  instructs  the  browser  to 
launch  an  action  while  it  loads  the  body  section  of  the  page. 

- OnCall:  With  this  option,  you  can  have  the  action  called  later 
in  the  browser  session  by  using  the  Call  Action  action  (see 
page  304).  When  you  create  an  OnCall  action,  Adobe  GoLive 
assigns  a default  name  (for  example:  B289B5EE0)  that  ap- 
pears in  the  Name  text  box  next  to  the  popup  menu.  You  can 
overwrite  this  name  with  a clear-text  description  that  is  easier 
to  retrieve.  Please  note  that  the  name  you  enter  here  must  be 
unique,  that  is,  it  must  not  be  used  by  any  other  variable  or 
action  in  the  page. 


Get  Form  Value 
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Get  Form  Value 


The  Get  Form  Value  action  reads  the  current  content  of  a form  ele- 
ment from  the  body  of  the  current  page.  This  action  depends  on  in- 
put from  the  visitor  in  the  form  text  field. 

To  set  up  a Get  Form  Value  action,  proceed  as  follows: 

1 Insert  an  Action  Item  in  the  head  section  of  the  page  (see 
page  246). 

2 Choose  the  Get  Form  Value  option  from  the  Getter  submenu  ofthe 
Actions  menu  in  the  Action  Inspector  (see  page  272). 


Setting  Up  the  Get  Form  Value  Action  in 
the  Action  Inspector 

This  popup  menu  lets  you  specify  when  and  how 
the  action  should  be  executed. 


This  text  box  lets  you  name  the  ac- 
tion, so  you  can  call  it  using  the  C<3// 
Action  action. 


Choose  the  Get  Form  Value  option  from  the  Ac- 
tions menu. 

Use  this  text  box  to  specify  the  parent  form  of  the 
form  element. 


Use  this  text  box  to  specify  the  form  element  the 
Get  Form  Value  action  is  supposed  to  read. 


3 In  the  Exec  menu,  set  the  Exec  trigger  to  OnUnload.  (You  can  also 
use  the  OnCall  action  if  you  attach  it  to  a form  image  that  serves 
as  a Submit  button.) 

4 Go  to  the  Form  text  box  and  enter  the  name  of  the  form  that  con- 
tains the  text  field. 

5 Go  to  the  Element  text  box  and  enter  the  name  of  the  text  field 
whose  content  you  want  to  read. 

6 If  your  form  contains  more  elements  you  want  to  have  read,  in- 
sert more  Get  Form  Value  actions  and  set  them  up  as  required. 

7 Set  up  companion  actions  that  process  the  result — for  example, 
a Set  Cookie  action  (see  page  31 5 later  in  this  chapter)  that  stores 
the  contents  of  various  Get  Form  Value  actions  on  the  visitor’s 
hard  disk. 
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Get  Floating  Box 
Position 


The  Get  Floating  Box  Position  action  reads  the  current  position  of  a 
floating  box  traveling  across  the  page.  You  can  process  this  informa- 
tion using,  for  example,  an  Idle  action  that  moves  a second  floating 
box  to  current  position  of  that  floating  box.  This  creates  the  impres- 
sion that  the  second  object  trails  behind  the  first  object. 


To  set  up  a Get  Floating  Box  Position  action,  proceed  as  follows: 

1 Prepare  an  animation  with  two  floating  boxes.  Open  the  Timeline 
Editor  and  record  an  animation  path  for  the  first  floating  box. 

2 Make  sure  that  the  second  floating  box  has  only  one  keyframe, 
so  it  is  static  and  unmoving.  (You  will  move  this  floating  box  us- 
ing the  Idle  action  indicated  in  the  introduction  at  the  top  of  this 
page.) 

3 Insert  an  Action  Item  in  the  head  section  of  the  page  (see 
page  246). 

4 Choose  the  Get  Floating  Box  Position  option  from  the  Getter  sub- 
menu of  the  Actions  menu  in  the  Action  Inspector  (see  page  272). 


Setting  Up  the  Get  Floating  Box  Position 
Action  in  the  Action  Inspector 

This  popup  menu  lets  you  specify  when  and  how 
the  action  should  be  executed. 

Choose  the  Get  Form  Value  option  from  the  Ac- 
tions menu. 

Use  this  text  box  to  select  the  floating  box  you 
want  to  monitor. 


This  text  box  lets  you  name  the  ac- 
tion, so  you  can  call  it  using  the  Call 
Action  action. 


5 Set  the  trigger  to  OnCall  in  the  Exec  menu  and  name  the  action, 
for  example,  GetLeaderPosition. 

6 Select  the  floating  box  you  want  to  monitor  from  the  lowermost 
popup  menu. 

7 Insert  another  Action  Item  in  the  head  section  of  the  page  and 
leave  its  trigger  set  to  OnLoad. 

8 Choose  the  Idle  option  from  the  Specials  submenu  of  the  Actions 
menu  in  the  Action  Inspector. 

9 Enter  an  appropriate  time  interval  in  the  Timeout  text  box  of  the 
Condition  tab. 


Preload  Image 
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10  Go  to  the  True  tab  and  choose  Move  To  as  the  action  that  should 
be  executed  when  the  condition  evaluates  to  true  (see  example 
below). 

11  Choose  the  floating  box  you  want  to  move,  for  example 
followlayer. 

12  Click  the  small  icon  next  to  the  Pos  option  until  the  green  ques- 
tion mark  and  the  popup  menu  appear  to  let  you  choose  an  ac- 
tion. 

13  Choose  the  Get  Floating  Box  Position  action  defined  in  previous 
steps,  for  example  GetLeaderPosition.  This  action  will  supply  the 
position  the  floating  box  will  be  moved  to. 

Setting  Up  the  Supplementary  Idle  Action 
for  the  Get  Floating  Box  Position  Action 


14  Repeat  for  the  False  tab. 

15  Preview  the  action  in  a 4.x  browser  (see  page  563.) 


Preload  Image 


The  Preload  Image  action  forces  the  browser  to  cache  the  component 
images  of  a button  image  (see  page  236).  Although  the  page  may 
take  longer  to  load  initially,  this  script  improves  the  responsiveness 
of  the  animation  because  the  browser  need  not  load  alternative  im- 
ages from  the  Web  server  each  time  the  visitor  clicks  or  moves  the 
mouse  cursor  over  the  Button  Image  (for  reference  on  Button  Images 
and  Actions  see  pages  236  and  239).  This  script  is  reserved  for  use 
with  an  Action  Item  in  the  head  section  of  the  page  that  holds  the 
Button  Image. 

To  set  up  a Preload  Image  action,  proceed  as  follows: 

1 Insert  an  Action  Item  in  the  head  section  of  the  page  (see 
page  246). 
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2  Choose  the  Preload  Image  option  from  the  Image  submenu  of  the 
Actions  menu  in  the  Action  Inspector  (see  page  272). 


Setting  Up  the  Preload  Image  Action  in 
the  Action  Inspector 

This  popup  menu  lets  you  specify  when  and  how 
an  action  should  be  executed. 

Choose  the  Preload  Image  option  from  the  Ac- 
tions menu. 


This  checkbox  converts  the  path  to  the  refer- 
enced ActiveX  control  to  an  absolute  path. 

This  option  is  discussed  in  the  section  SettingUp 
Adobe  GoLive  to  Use  Absolute  Paths  on  page  71 9 
in  Chapter  17,  Managing  Web  Sites  with  Adobe 
GoLive. 


This  text  box  lets  you  name  the  action, 
so  you  can  call  it  usingtheCfl/Mcf/or?  ac- 
tion. 


Use  these  options  to  specify  the  image  to 
be  cached  by  the  browser. 


3 Use  Point  & Shoot  to  select  an  image  in  the  Site  window  (see  sec- 
tion "Point  & Shoot"  on  page  1 58  in  chapter  “Building  Web  Pag- 
es", for  reference),  enter  the  URL  of  the  image  in  the  C/VrA:  text  box, 
or  click  Browse...  and  select  an  image  file  on  your  hard  disk  in 
the  subsequent  file  selection  dialog  box. 

4 Repeat  steps  1 to  3 for  each  component  image  used  in  the  Button 
Image  animation. 

5 View  the  Button  Image  in  a 4.x  browser  and  check  whether  the 
responsiveness  of  the  animation  has  improved  (for  detailed  in- 
formation on  how  to  use  browsers  for  previewing  please  see  the 
section  Using  the  Browser  Launcher  on  page  563  in  Chapter  14, 
Previewing  Your  Work). 


Random  Image 


The  Random  Image  action  swaps  the  content  of  an  image  in  a ran- 
dom sequence,  based  on  an  external  trigger  (for  example  a mouse- 
click  through  the  visitor).  You  can  specify  a maximum  of  three  alter- 
native images  for  the  base  image. 

To  set  up  a Random  Image  action  for  a normal  image,  proceed  as  fol- 
lows: 

1 In  Layout  mode,  insert  an  image  placeholder. 

2 Go  to  the  Basic  tab  of  the  Image  Inspector  and  reference  an  im- 
age, as  explained  in  the  section  Images  starting  on  page  149  in 
Chapter  4,  Building  Web  Pages. 

3 Switch  to  the  Spec,  tab  of  the  Image  Inspector  and  entera  unique 
name  in  the  Name  text  box. 


Random  Image 
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The  Random  Image  action  requires  that  the  base  image  be 
named.  Naming  the  base  image  ensures  that  it  appears  in  the 
Base  Image  popup  menu  in  the/\cf/o/istab  of  the  Image  Inspector. 


4 Switch  to  the  Link  tab  of  the  Image  Inspector  and  click  the  New 
Link  button. 


This  step  is  required  in  order  for  the  Random  Image  action  to 
work  with  a normal  image.  You  don’t  need  to  specify  any  target 
for  this  link;  you  can  leave  the  Empty  Reference  in  place  in  the 
URL  text  box. 


Setting  Up  the  Random  Image  Action  in 
the  Image  Inspector 

Click  the  “+”  button  to  enable  action  attachment. 


Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 


Choose  the  Random  Image  option  from  the  Ac- 
tions menu. 

Use  this  option  to  specify  the  base  image. 

Use  this  option  to  specify  the  first  alternative  im- 
age. 


Use  this  option  to  specify  the  second  alternative 
image. 


Use  this  option  to  specify  the  third  alternative  im- 
age. 


Image  Inspector 


Basic  1 Spec.  Map  ^ Link  f Actions  ) 


Image  Link 


Events 

Actions  ' — [•+][- 

Mouse  Click  • 

= 

Randomlmage 

f $ Mouse  Enter 

_ 



Mouse  Exit 

•W 

- ? Action  y I f^jl  Randomlmage  (NS  3,  IE  4) 

Base  Image; 

,ma9e  1 : | file :/ / /Macintosh3g20HD/Desktop982QFolder  / 1 
frSij  Absolute  [^rowsc^J 

Image  2:  | r|<s  /News  letterSS2QS  ite$g20Fo  Ider  /Ne vsiej|  4> 
[rfrl  0 Absolute  [^Brovse^J 

Image  3:  | sg20Pate ien  / lnSg20theSg20V  or  ks  /News  Ietter9 1 
frgil  0 Absolute  iBrovs^jJ 


This  checkbox  converts  the  path 
to  the  referenced  ActiveX  con- 
trol to  an  absolute  path. 

This  option  is  discussed  in  the 
section  Setting  Up  Adobe  GoLive 
to  Use  Absolute  Paths  on 
page  719  in  Chapter  17,  Manag- 
ing Web  Sites  with  Adobe  GoLive. 


5 GototbeActionstaboHhelmagelnspector,se\ecta  mouseorkey 
event,  and  click  the  “+”  button. 

6 Choose  the  Random  Image  option  from  the  Image  submenu  of 
the  Actions  menu  in  the  Image  Inspector. 

7 Goto  the  Base  Image  popup  menu  and  select  the  base  image  you 
want  to  have  swapped  in  a random  sequence. 

8 Use  Point  & Shoot  (see  page  158)  to  select  alternative  images  for 
Image  1,  Image  2,  and  Image  3 from  the  Site  window.  You  can 
also  enter  the  three  URLs  in  the  Image  1,  Image 2,  and  Image 3 
text  boxes  or  click  Browse...  and  select  each  image  in  the  subse- 
quent file  selection  dialog  box. 

9 Preview  the  action  in  a 4.x  browser  (see  page  563.) 
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The  Random  Image  action  requires  equally  sized  images  in  or- 
der to  avoid  scaling  problems  when  viewing  the  action  in  a 
browser. 


Set  Image  URL 


The  Set  Image  URL  action  lets  you  swap  the  content  of  an  image  in 
the  browser  window — for  example,  an  animated  banner  at  the  top 
of  the  page.  You  can  exchange  an  image  dynamically  by  inserting 
two  keyframes  in  the  Timeline  Editor  and  adding  complementary  Set 
Image  URL  actions  at  the  same  positions  relative  to  the  time  track.  Or 
you  can  attach  the  action  to  buttons  or  text  items  to  let  the  visitor 
decide.  If  you  opt  for  buttons,  you  need  two  images  per  action:  one 
button  image  as  a control  and  one  plain  image  whose  content  will 
be  swapped. 

To  set  up  a Set  Image  URL  action  in  the  Timeline  Editor  or  attach  it  to 
a button  image  or  hyperlink  text  in  the  Layout  view,  proceed  as  fol- 
lows: 


1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Set  Image  URL  from  the  Image  submenu  of  the  Actions 
menu  in  the  respective  Inspector. 


Setting  Up  an  Set  Image  URL  Button  in  the 
Action  Inspector 

Click  the  “+”  button  to  enable  action  attachment. 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Choose  Set  Image  URL  from  the  Actions  menu. 

Use  this  menu  to  select  the  image  you  want  to 
dynamically  exchange. 

Use  these  options  to  specify  an  alternative  image. 


□ Button  Inspector  B 


This  checkbox  converts  the  path 
to  the  referenced  image  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
17,  Managing  Web  Sites  with 
Adobe  GoLive. 


3  Select  the  plain  image  you  want  to  exchange  from  the  Image  pop- 
up menu.  To  list  the  image,  it  must  be  named  in  the  Spec,  tab  of 
the  Image  Inspector.  To  name  it,  type  text  in  the  Name  text  box 
within  the  Form  section. 


Go  Last  Page 
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The  Set  Image  URL  action  requires  images  of  equal  size  to  avoid 

problems  through  scaling. 

4 Use  Point  & Shoot  to  link  to  an  image  file  in  the  Site  Window,  type 
in  the  URL  path  to  the  alternative  image  in  the  Link  text  box,  or 
click  Browse  and  locate  a local  image  file  in  the  subsequent  file 
selection  dialog. 

5 Preview  the  action  in  a 4.x  browser.  The  second  image  will  be 
scaled  to  match  the  size  of  the  first  graphic. 

6 To  restore  the  base  image,  add  a second  keyframe  and  Set  Image 
URL  action  pair  to  the  Actions  Track  of  the  Timeline  Editor,  or  add 
a second  button  image  or  text  item. 

7 Repeat  steps  2 through  4 for  the  new  action.  When  repeating 
step  4,  make  sure  you  reference  the  original  image  displayed  be- 
fore the  first  Set  Image  URL  is  executed. 

8 Preview  the  action  in  a 4.x  browser. 


Tip:  You  can  create  a slide  show  by  adding  multiple  Set  Image 
URL  actions  and  a complementary  keyframe  on  the  Actions 
Track  of  the  Timeline  Editor. 


Go  Last  Page  The  Go  Last  Page  action  forces  the  visitor’s  browser  to  jump  to  the 

page  visited  last.  If  you  use  this  action,  you  should  give  a hint  to  the 
visitor  that  his  or  her  browser  returns  to  a page  already  visited. 


Setting  Up  the  Go  Last  Page  Action  in  the 
Text  Inspector 

Click  the  “+”  button  to  enable  action  attachment.  — I" 

Use  this  option  to  choose  a mouse  or  key  event  

that  triggers  the  action. 


Choose  the  Go  Last  Page  option  from  the  Actions 
menu  in  the  Action  Inspector. 
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To  set  up  a Go  Last  Page  action,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Text  Inspector,  Image  Inspector,  or 
Button  Inspector. 

2 Select  the  Go  Last  Page  option  from  the  Link  submenu  of  the/\c- 
tions  menu. 

3 Preview  the  action  in  a 4.x  browser. 


Goto  Link  The  Goto  Link  action  jumps  to  a user-specified  URL.  When  using  this 

action  to  jump  to  another  site,  it  is  good  practice  to  give  visitors  a 
hint  that  they  are  going  to  move  to  another  location  on  the  Web. 


Setting  Up  a Goto  Link  Button  in  the 
Button  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attachment. 


Choose  Goto  Link  from  the  Actions  menu. 


Use  these  options  to  specify  the  destination  on 
the  Web  or  within  your  site. 


Use  this  text  box  to  specify  the  target  frame  with- 
in a frame  set. 


This  checkbox  converts  the  path 
to  the  referenced  image  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
1 7,  Managing  Web  Sites  with 
Adobe  GoLive. 


To  set  up  a Goto  Link  action  in  the  Timeline  Editor  or  for  a button  im- 
age in  the  Layout  view,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Inspector.  (Using  this  ac- 
tion with  text  may  confuse  visitors.  Use  a normal  text  hyperlink 
instead.) 

2 Choose  Goto  Link  from  the  Actions  menu. 


Navigate  History 
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3 Click  the  small  icon  next  to  the  Link  option  to  specify  who  should 
supply  the  Web  address: 


a 


The  red  “C”  icon  (default)  displays  a text  box,  Point  & 
Shoot  button  and  Browse  button  combination  to  let 
you  specify  a fixed  Web  address. 


13 


The  green  question  mark  icon  displays  a popup  menu 
that  lets  you  choose  an  action. 


a 


The  blue  ball  icon  displays  a popup  menu  that  lets  you 
select  a variable  that  holds  the  Web  address. 


4 If  the  current  page  is  located  in  a frame  set  (see  page  430),  use 
the  Target  text  box  to  specify  a target  frame  where  the  referenced 
page  should  appear. 

5 Preview  the  action  in  a 4.x  browser. 


Navigate  History  The  Navigate  History  action  makes  the  visitor’s  browser  jump  back  by 

a specified  number  of  pages  in  the  history  window.  If  you  use  this  ac- 
tion, you  should  give  a hint  to  the  visitor  that  his  or  her  browser  re- 
turns to  a page  already  visited. 


Setting  Up  the  Navigate  History  Action  in 
the  Button  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attachment. 


Choose  the  Navigate  History  option  from  the  Ac- 
tions menu  in  the  Button  Inspector. 


To  set  up  a Navigate  History  action,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editorto  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/\cf/o/?stab  of  the  Text  Inspector,  Image  Inspector,  or 
Button  Inspector. 
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2 Select  the  Navigate  History  option  from  the  Link  submenu  of  the 
Actions  menu. 

3 Enter  an  integer  number  in  the  Go  Where:  text  box  to  specify  the 
number  of  pages  you  want  the  browser  to  jump  back  or  forth. 

4 Preview  the  action  in  a 4.x  browser  (page  563). 


Open  Window 


Setting  Up  an  Open  Window  Action  in  the 
Action  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attachment. 


Choose  Open  Window  from  the  Actions  menu. 


Use  these  options  to  specify  a destination  on  the 
Web  or  within  your  site. 

Use  this  text  box  to  specify  the  target  frame  with- 
in a frame  set. 

Use  these  options  to  set  the  initial  window  prop- 
erties, such  as  size  and  resizing  capability. 


The  Open  Window  action  lets  you  open  a second  window  on  top  of 
the  browser’s  default  window.  You  can  select  what  the  new  window 
will  display  by  specifying  an  URL. 

To  set  up  an  Open  Window  action  in  the  Timeline  Editor  or  attach  it 
to  a button  image  or  hyperlink  text  in  the  Layout  view,  proceed  as 
follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Open  Window  from  the  Link  submenu  of  the  Actions 
menu  in  the  respective  Inspector. 


This  checkbox  converts  the  path 
to  the  referenced  image  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
1 7,  Managing  Web  Sites  with 
Adobe  GoLive. 


3  Use  Point  & Shoot  to  link  to  a page  or  URL  in  the  Site  Window 
(page  158),  type  in  the  URL  in  the  Link  text  box,  or  click  Browse 
and  locate  a local  Web  page  in  the  subsequent  file  selection  dia- 
log. 


Document  Write 
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Document  Write 


3 


Setting  Up  a Document  Write  Action  in  the 
Action  Inspector 

Choose  Document  Write  from  the  Actions  menu. 


4 If  the  current  page  is  located  in  a frame  set  (see  page  430),  use 
the  Target  text  box  to  specify  a target  frame  where  the  referenced 
page  should  appear. 

5 Enter  appropriate  values  (in  pixels)  in  the  Size  text  boxes  to  deter- 
mine the  initial  size  of  the  window  when  the  browser  opens  it. 

6 Click  the  Resize  checkbox  to  allow  resizing  within  the  browser. 

7 Click  the  Scroll  checkbox  to  control  the  display  of  scroll  bars  with- 
in the  browser  window. 

8 Click  the  Menu  checkbox  to  control  the  display  of  the  browser’s 
menu  bar. 

9 Click  the  Dir  checkbox  to  control  the  display  of  the  standard 
browser  directory  buttons,  such  as  “What’s  New”  and  “What’s 
Cool”. 

10  Click  the  Tools  checkbox  to  control  the  display  of  the  browser’s 
toolbar. 

11  Preview  the  action  in  a 4.x  browser  (page  563). 


The  Document  Write  action  is  a companion  action  to  the  Inline  Action 
Item.  It  replaces  an  Inline  Action  Item  with  text  or  HTML  code  you 
specify,  the  current  value  retrieved  by  an  action,  or  the  value  of  a 
variable. 

To  set  up  a Document  Write  action,  proceed  as  follows: 

1 Insert  an  Inline  Action  Item  (see  page  248)  at  a convenient  loca- 
tion in  the  body  section  of  the  page. 

2 Choose  the  Document  Write  option  from  the  Message  submenu  of 
the  Actions  menu  in  the  Action  Inspector  (see  page  272). 


Use  this  option  to  the  source  of  the  HTML 
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3 Click  the  small  icon  next  to  the  HTML  option  to  specify  the  source 
that  should  supply  the  HTML: 


a 


The  red  “C”  icon  displays  a text  box  or  another  control, 
depending  on  the  object  the  action  manipulates. 


□ 


The  green  question  mark  icon  displays  a popup  menu 
that  lets  you  choose  an  action. 


□ 


The  blue  ball  icon  displays  a popup  menu  that  lets  you 
select  a variable  defined  in  the  page. 


4 Preview  the  action  in  a 4.x  browser  (see  page  563.) 


Open  Alert  Window 


An  Alert  Window  Displayed  in  Netscape 
Navigator  4.0 


The  Open  Alert  Window  action  lets  you  open  an  alert  dialog  box  with 
a custom  text  message  to  alert  the  visitor  to  some  problem — for  ex- 
ample, a preferred  browser  version  for  viewing  a page. 


[JauaScript  Application] 


A 


This  page  is  best  uieuied  with  Netscape 
Nauigator  4.0  or  later. 


I 0K  ll 


To  set  up  an  Open  Alert  Window  action  in  the  Timeline  Editor  or  at- 
tach it  to  a button  image  or  hyperlink  text  in  the  Layout  view,  pro- 
ceed as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Open  Alert  Window  from  the  Message  submenu  of  the 
Actions  menu  in  the  respective  Inspector. 


Set  Status 
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Setting  Up  an  Alert  Window  in  the 
Action  Inspector 

Choose  Open  Alert  Window  from  the  Actions  menu. 
Use  this  text  box  to  specify  the  alert  message. 


Set  Status 


3 


Action  Inspector 


? Action  „ | [jp]  Open  Alert  Vmdow  (NS  2,  ... 
- Message  [c]  | Thu  animatier.  i_-  best  viewed  with  'l[ 


3 Click  the  small  icon  next  to  the  Message  option  to  specify  the 
source  that  should  supply  the  HTML: 


□ 


The  red  “C”  icon  displays  a text  box  to  let  you  enter  a 
fixed  message. 


ta 


The  green  question  mark  icon  displays  a popup  menu 
that  lets  you  choose  an  action  that  supplies  text. 


The  blue  ball  icon  displays  a popup  menu  that  lets  you 
select  a variable  defined  in  the  page. 


4 Preview  the  action  in  a 4.x  browser  (see  page  563). 


The  Set  Status  action  allows  you  to  display  a custom  text  message  in 
the  status  line  at  the  bottom  of  the  browser’s  document  window. 

To  set  up  a Set  Status  action  in  the  Timeline  Editor  or  attach  it  to  a 
button  image  or  hyperlink  text  in  the  Layout  view,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editorto  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Set  Status  from  the  Message  submenu  ofthe/tef/onsmenu 
in  the  respective  Inspector. 
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Setting  Up  a Set  Status  Button  in  the 
Action  Inspector 

Choose  Set  Status  from  the  Actions  menu. 
Use  this  text  box  to  enter  the  message. 


Drag  Floating  Box 


3 


3 Enter  the  desired  message  in  the  Text  text  box. 

4 Preview  the  action  in  a 4.x  browser  (see  page  563). 


The  Drag  Floating  Box  action  allows  visitors  to  drag  a floating  box 
around  the  page  in  their  browser  window. 

To  set  up  a Drag  Floating  Box  action  in  the  Timeline  Editor,  proceed 
as  follows: 

1 Insert  a floating  box  and  fill  it  with  content  (see  page  214).  Be 
sure  to  let  visitors  know  that  they  can  drag  an  item  around. 

2 Insert  an  Action  Item  into  the  head  section  of  the  page  (see 
page  246  for  instructions). 

3 Choose  Drag  Floating  Box  from  the  Multimedia  submenu  of  the 
Actions  menu  in  the  Action  Inspector. 


Flip  Move 
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Setting  Up  a Drag  Floating  Box  Action  in 
the  Action  Inspector 

Choose  Drag  Floating  Box  from  the  Actions  menu. 


Use  this  menu  to  select  the  floating  box  you  want 
to  allow  dragging  for. 


4 Go  to  the  Layer  menu  and  choose  the  floating  box  you  want  to 
assign  the  action  to.  The  floating  boxes  in  the  current  page  are 
named  Layer,  Layer  7,  Layer 2,  and  so  on,  unless  you  have  re- 
named them  in  the  Floating  Box  Inspector  (see  page  253). 

5 Preview  the  action  in  a 4.x  browser.  You  should  now  be  able  to 
drag  around  the  item(s)  in  the  floating  box. 


Flip  Move 


When  triggered  for  the  first  time,  the  Flip  Move  action  moves  a float- 
ing box  to  a user-specified  position.  When  triggered  for  the  second 
time,  it  moves  the  floating  box  back  to  its  start  point.  For  example, 
you  can  attach  this  action  to  a button  to  let  the  user  flip  an  object 
into  view  that  is  initially  hidden  behind  the  edge  of  the  page  and  flip 
it  back  out  of  sight  again. 

To  set  up  a Flip  Move  action  in  the  Timeline  Editor  or  attach  it  to  a 
button  image  or  hyperlink  text  in  the  Layout  view,  proceed  as  fol- 
lows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editorto  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Button  Inspector  or  Text  inspector. 

2 Choose  Flip  Move  from  the  Multimedia  submenu  of  the  Actions 
menu. 
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Setting  Up  a Flip  Move  Action  in  the 
Button  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attach- 

Choose  Flip  Move  from  the  Actions  menu. 

Use  this  menu  to  pick  the  box  you  want  to  flip. 
Use  these  options  to  specify  the  start  point. 

Use  these  options  to  specify  the  end  point. 
Select  this  option  to  enable  animation. 

Use  this  option  to  specify  animation  speed. 


3 Go  to  the  Layer  menu  and  choose  the  floating  box  you  want  to 
assign  the  action  to.  The  floating  boxes  in  the  current  page  are 
named  Layer,  Layer  7,  Layer 2,  and  so  on,  unless  you  have  re- 
named them  in  the  Floating  Box  Inspector  (see  page  253). 

4 Use  the  Pos  7 and  Pos2  text  boxes  to  edit  the  start  and  end  points 
for  the  flip  move  action,  or  drag  the  floating  box  to  the  desired 
start  point  and  click  Get  to  use  those  coordinates  for  Post.  Repeat 
for  Pos2  to  determine  the  end  point. 

5 Make  sure  th eAnim  checkbox  is  selected. 

6 Enter  a value  in  the  Ticks  text  box  to  specify  animation  speed. 
One  tick  equals  1/60  of  a second.  The  higherthe  number  of  ticks, 
the  slower  the  object  moves. 

7 Preview  the  action  in  a 4.x  browser  (see  page  563). 


Move  By 


The  Move  By  action  moves  a floating  box  horizontally  and/or  verti- 
cally by  a user-specified  offset. 

To  set  up  a Move  By  action  in  the  Timeline  Editor  or  attach  it  to  a but- 
ton image  or  hyperlink  text  in  the  Layout  view,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Image  or  Text  Inspector. 

2 Choose  Move  By  from  the  Multimedia  submenu  of  the  Actions 
menu. 


Move  By 
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Setting  Up  a Move  By  Action  in  the 
Text  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attach- 

Choose  Move  By  from  the  Actions  menu. 

Use  this  menu  to  select  the  box  you  want  to 

Use  this  option  to  specify  the  horizontal  offset. 
Use  this  option  to  specify  the  vertical  offset. 


3 Go  to  the  Layer  menu  and  choose  the  floating  box  you  want  to 
assign  the  action  to.  The  floating  boxes  in  the  current  page  are 
named  Layer,  Layer  7,  Layer 2,  and  so  on,  unless  you  have  re- 
named them  in  the  Floating  Box  Inspector  (see  page  253). 

4 Click  the  small  icon  next  to  the  Floating  Box  option  to  specify  who 
should  supply  the  floating  box  parameters: 


a 


The  red  “C”  icon  (default)  displays  a popup  menu  and 
text  boxes  to  let  you  enter  your  own  constant  values. 


a 


The  green  question  mark  icon  displays  a popup  menu 
that  lets  you  choose  an  action,  such  as  Get  Floating  Box 
Position  (see  page  276). 


a 


The  blue  ball  icon  displays  a popup  menu  that  lets  you 
select  a variable  defined  in  the  page. 


The  following  instructions  assume  that  you  use  constants: 

5 Use  the  DeltaXtext  box  to  specify  the  number  of  pixels  by  which 
you  want  to  move  the  floating  box  horizontally. 

6 Use  the  DeltaYtext  box  to  specify  the  number  of  pixels  by  which 
you  want  to  move  the  floating  box  vertically. 

7 Make  su  re  th eAnim  checkbox  is  selected,  then  preview  the  action 
in  a 4.x  browser. 
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Move  To 


Setting  Up  a Move  To  Action  in  the 
Button  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 


Click  the  “+”  button  to  enable  action  attach- 
ment. 


Choose  Move  To  from  the  Actions  menu. 

Use  this  menu  to  select  the  box  you  want  to 
move. 

Use  these  options  to  specify  the  end  point. 
Select  this  option  to  enable  animation. 

Use  this  option  to  specify  animation  speed. 


The  Move  To  action  is  a “one-way”  version  of  Flip  Move  (see  page  289). 
It  moves  a floating  box  to  a user-specified  position,  where  it  remains 
for  the  rest  of  the  browser  session. 

To  set  up  a Move  To  action  in  the  Timeline  Editor  or  attach  it  to  a but- 
ton image  or  hyperlink  text  in  the  Layout  view,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Image  or  Text  Inspector. 

2 Choose  Move  To  from  the  Multimedia  submenu  of  the  Actions 
menu. 


3 Go  to  the  Layer  menu  and  choose  the  floating  box  you  want  to 
assign  the  action  to.  The  floating  boxes  in  the  current  page  are 
named  Layer,  Layer  7,  Layer 2,  and  so  on,  unless  you  have  re- 
named them  in  the  Floating  Box  Inspector  (see  page  253). 

4 Click  the  small  icon  next  to  the  Floating  Box  option  to  specify  who 
should  supply  the  floating  box  parameters: 


□ 


The  red  “C”  icon  (default)  displays  a popup  menu  and 
text  boxes  to  let  you  enter  your  own  constant  values. 


The  green  question  mark  icon  displays  a popup  menu 
that  lets  you  choose  an  action,  such  as  Get  Floating  Box 
Position  (see  page  276). 


The  blue  ball  icon  displays  a popup  menu  that  lets  you 
select  a variable  defined  in  the  page. 


Play  Scene  & Stop  Scene 
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The  following  instructions  assume  that  you  use  constants: 

5 Use  the  Pos  text  box  to  edit  the  end  point  for  the  Move  To  action, 
or  drag  the  floating  box  to  the  desired  end  point  and  click  Get  to 
use  those  coordinates  for  the  end  position.  The  start  point  is  im- 
plicit— that  is,  Adobe  GoLive  assumes  you  want  the  animation  to 
start  where  the  floating  box  is  located  before  you  define  the  end 
point. 

6 Enter  a value  in  the  Ticks  text  box  to  specify  animation  speed. 
One  tick  equals  1/60  of  a second.  The  higher  the  number  of  ticks, 
the  slower  the  object  moves. 

7 Make  su  re  the  Anim  checkbox  is  selected,  then  preview  the  action 
in  a 4.x  browser. 


Play  Scene  & Stop 
Scene 


The  Play  Scene  and  Stop  Scene  actions  let  you  manage  the  playback 
of  single-scene  animations  or  multiple  scenes  created  with  the  Time- 
line Editor.  You  can  control  multiple-scene  animations  dynamically 
by  inserting  Play  Scene  and  Stop  Scene  actions  on  the  action  track  of 
the  Timeline  Editor  (see  Using  Multiple  Scenes  on  page  267)  or  let  the 
visitor  control  scene  playback  by  clicking  buttons  labeled,  for  exam- 
ple, Play  and  Stop. 

To  set  up  a Play  Scene  action  fora  button  image  or  hyperlink  text  in 
the  Layout  view,  proceed  as  follows: 

1 Select  a mouse  or  key  event  and  click  the  “+”  button  in  the  Ac- 
tions tab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Stop  Scene  from  the  Multimedia  submenu  of  the  Actions 
menu  in  the  respective  Inspector.  (Inserting  a Stop  Scene  action  is 
good  practice  at  this  point;  itstopsany  otheranimation  that  may 
still  be  playing  when  the  visitor  clicks  the  Play  button.) 

3 Click  the  “+”  button  one  more  time,  then  select  Play  Scene  from 
the  Actions  menu. 
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Setting  Up  a Play  Scene  Button  in  the 
Button  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attachment. 


Choose  Stop  Scene,  then  Play  Scene  from  the 
Actions  menu. 

Use  this  popup  menu  to  choose  the  scene  you 
want  to  stop  or  start. 


4 Choose  the  scene  you  want  the  browser  to  play  back  from  the 
Scene  popup  menu. 

To  set  up  a Stop  Scene  action  for  a button  image  or  hyperlink  text  in 

the  Layout  view,  proceed  as  follows: 

1 Select  a mouse  or  key  event  and  click  the  “+”  button  in  the  Ac- 
tions tab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Stop  Scene  from  the  Multimedia  submenu  of  the  Actions 
menu  in  the  Inspector. 

3 Choose  the  scene  you  want  the  browser  to  stop  from  the  Scene 
popup  menu. 

4 Preview  the  action  in  a 4.x  browser  (see  page  563). 


Play  Sound  & Stop  You  can  insert  the  Play  Sound  and  Stop  Sound  actions  on  the  Actions 

Sound  Track  of  the  Timeline  Editor  or  attach  them  to  a pair  of  Play  and  Stop 

buttons  or  text  in  the  Layout  view  to  control  the  playback  of  an  audio 
track  embedded  by  using  a plugin. 


Please  note  that  the  Play  Sound  action  requires  a cross-plat- 
form,  cross-browser  audio  plugin  that  can  be  controlled  by 
JavaScript. 


To  set  up  a Play  Sound  action  in  the  Timeline  Editor  or  attach  it  to  a 
button  image  or  hyperlink  text  in  the  Layout  view,  proceed  as  follows: 

1 Insert  a plugin  placeholder  and  link  it  with  a sound  file  (see 
Plugins  in  Chapter  4,  Building  Web  Pages,  starting  on  page  202). 
Name  the  audio  plugin  (the  name  is  referenced  later  to  tell  the 
browser  which  plugin  to  play),  then  specify  custom  attributes 
and  playback  behavior  in  the  Plugin  Inspector. 


Play  Sound  & Stop  Sound 


295 


2 Command-click  the  Actions  Track  of  the  Timeline  Editorto  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Button  Inspector  or  Text  Inspector. 

3 Choose  Stop  Sound  from  the  Multimedia  submenu  of  the  Actions 
menu  in  the  respective  Inspector.  (Inserting  a Stop  Sound  action 
is  good  practice  at  this  point;  it  prevents  system  crashes  by  stop- 
ping any  other  sound  track  that  may  still  be  playing  when  the  vis- 
itor clicks  the  Play  button.) 

4 Pick  the  sound  you  want  to  stop  from  the  Name  popup  menu. 

5 Insert  another  action  marker  on  theActions  Track  of  the  Timeline 
Editor  or  click  the  “+”  button  in  the  Button  Inspector  or  Text  In- 
spector one  more  time,  then  select  Play  Sound  from  the  Multime- 
dia submenu  of  theActions  menu. 


Setting  Up  a Play  Sound  Button  in  the 
Action  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attachment. 


Choose  Stop  Sound,  then  Play  Sound  from  the 
Actions  menu. 

Use  this  popup  menu  to  pick  the  sound  you  want 
to  have  played  back. 


6 Choose  the  sound  you  want  to  start  playing  back  from  the  Name 
menu. 

7 Preview  the  action  in  a 4.x  browser. 

To  set  up  a Stop  Sound  action,  proceed  as  follows: 

1 Command-click  theActions  Track  of  the  Timeline  Editorto  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Stop  Sound  from  the  Multimedia  submenu  of  the  Actions 
menu  in  the  respective  Inspector. 

3 Choose  the  sound  you  want  to  stop  from  the  Name  popup  menu. 

4 Preview  the  action  in  a 4.x  browser. 
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Show  Hide 


The  Show  Hide  action  lets  you  control  the  visibility  status  of  a floating 
box  in  the  browser’s  document  window.  You  can  show  or  hide  ob- 
jects dynamically  by  inserting  two  keyframes  in  the  Timeline  Editor 
(see  page  254,  for  instruction)  and  adding  Show  Elide  actions  to  the 
time  track  of  the  floating  box. 

To  set  up  a Show  Elide  action  in  the  Timeline  Editor,  proceed  as  fol- 
lows: 

1  Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker. 


2  Choose  Show  Elide  from  the  Multimedia  submenu  of  the  Actions 
menu  in  the  Action  Inspector. 


Setting  Up  a Show  Hide  Button  in  the 
Action  Inspector 

Choose  Show  Hide  from  the  Actions  menu. 

Use  this  menu  to  select  the  floating  box  you  want 
to  dynamically  show  or  hide. 

Use  this  menu  to  specify  what  should  be  done 
with  the  floating  box. 


3 Go  to  the  Layer  menu  and  choose  the  floating  box  you  want  to 
assign  the  action  to.  The  floating  boxes  in  the  current  page  are 
named  Layer,  Layer  L,  Layer 2,  and  so  on,  unless  you  have  re- 
named them  in  the  Floating  Box  Inspector  (see  page  253). 

4 Go  to  the  Mode  menu  and  choose  what  should  happen  to  the 
floating  box: 

- Elide  hides  the  floating  box  until  a complementary  Stow  ac- 
tion is  executed. 

- Show  uncovers  the  floating  box  until  a complementary  Hide 
action  is  executed. 

Toggle  shows  or  hides  the  floating  box,  depending  on  its  cur- 
rent visibility  status. 

5 Create  another  keyframe  and  a complementary  Stow  H/to  action 
in  the  Timeline  Editor. 

Preview  the  action  in  a 4.x  browser  (see  page  563). 


6 


Stop  Complete 
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Stop  Complete 


The  Stop  Complete  action  stops  all  animation  in  the  browser’s  win- 
dow. As  a courtesy  to  visitors  with  slow  connections,  include  a Stop 
Animation  button  in  any  animated  page  you  create,  allowing  them 
to  stop  playback  without  choosing  a menu  command  or  editing 
browser  preferences. 

To  set  up  a Stop  Complete  action  for  a button  image  or  hyperlink  text 
in  the  Layout  view,  proceed  as  follows: 

1 Select  a mouse  or  key  event  and  click  the  “+”  button  in  theAc- 
tions  tab  of  the  Button  Inspector  or  Text  Inspector. 

2 Choose  Stop  Complete  from  the  Multimedia  submenu  of  the  Ac- 
tions menu  in  the  Action  Inspector. 


Setting  Up  a Stop  Complete  Button  in  the 
Action  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 

Click  the  “+”  button  to  enable  action  attachment. 


Choose  Stop  Complete  from  the  Actions  menu. 


3  Preview  the  action  in  a 4.x  browser  (see  page  563). 


Wipe  Transition 


The  Wipe  Transition  action  fades  floating  boxes  and  their  visible  con- 
tent in  and  out  using  a “shutter  effect”. 

To  set  up  a Wipe  Transition  action,  proceed  as  follows: 

1 In  Layout  mode,  insert  a floating  box  and  provide  some  content. 
You  can  use  a button  image,  a normal  image,  or  text. 

2 If  you  use  a normal  image  or  text,  select  the  object  and  click  the 
New  Link  button  in  the  Toolbar  or  the  respective  Inspector. 
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This  step  is  required  in  order  for  the  Wipe  Transition  action  to 
work  with  a normal  image  or  text.  You  don’t  need  to  specify 
any  target  for  this  link;  you  can  leave  the  Empty  Reference  in 
place  in  the  URL  text  box. 


3 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Inspector,  Image  Inspector, 
or  Text  Inspector. 

4 Choose  the  Wipe  Transition  option  from  the  Multimedia  submenu 
of  the  Actions  menu. 


Setting  Up  the  Wipe  Transition  Action  in 
the  Button  Inspector 

Click  the  “+”  button  to  enable  action  attachment. 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 


Choose  the  Wipe  Transition  option  from  the  Ac- 
tions menu. 

Use  this  menu  to  choose  the  floating  box  you 
want  to  wipe  in  or  out. 

Use  this  menu  to  pick  a transition. 

Use  this  option  to  specify  how  smooth  the  tran- 
sition should  be. 


5 Go  to  the  Layer  menu  and  choose  the  floating  box  you  want  to 
assign  the  action  to.  The  floating  boxes  in  the  current  page  are 
named  Layer,  Layer  L,  Layer 2,  and  so  on,  unless  you  have  re- 
named them  in  the  Floating  Box  Inspector  (see  page  253). 

6 Pick  an  option  from  the  Transition  menu  to  determine  the  way 
the  floating  box  will  be  wiped  in  or  out: 

- Wipe  Out  From  Left  To  Right 

- Wipe  In  From  Left  To  Right 

- Wipe  Out  From  Right  To  Left 

- Wipe  In  From  Right  To  Left 

- Wipe  Out  From  Top  to  Bottom 

- Wipe  In  from  Top  to  Bottom 

- Wipe  Out  from  Bottom  to  Top 

- Wipe  In  from  Bottom  to  Top 


Netscape  CSS  Fix 
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- Wipe  Center  Out 

- Wipe  Center  In 

7 Enter  an  integer  in  the  Steps  text  box  to  determine  the  number  of 
steps  for  the  transition.  The  higher  the  number  of  steps,  the 
smoother  the  transition  appears. 

8 Preview  the  action  in  a 4.x  browser  (see  page  563). 


Netscape  CSS  Fix  The  Netscape  CSS  Fix  action  is  a workaround  for  a program  error  in 

Netscape  Navigator  that  causes  Web  pages  to  lose  important  CSS  in- 
formation when  the  visitor  resizes  the  browser  window. 


To  set  up  a Netscape  CSS  Fix  action,  proceed  as  follows: 

1 Insert  an  Action  Item  in  the  head  section  of  the  page  (see 
page  246). 

2 Choose  the  Netscape  CSS  Fix  option  from  the  Others  submenu  of 
the  Actions  menu  in  the  Action  Inspector. 


Setting  Up  the  Netscape  CSS  Fix  Action  in 
the  Action  Inspector 

This  popup  menu  lets  you  specify  when  and  how 
an  action  should  be  executed. 


Choose  the  Netscape  CSS  Fix  option  from  the  Ac- 
tions menu. 


This  text  box  lets  you  name  the  action, 
so  you  can  call  it  using  the  Call  Action  ac- 
tion. 


3  Test-run  your  animations  or  actions  in  Netscape  Navigator  and 
Communicator  4.x. 


We  recommend  using  the  Netscape  CSS  Fix  action  customarily 
whenever  you  create  animations  involving  floating  boxes. 
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Resize  Window  The  Resize  Window  action  resizes  the  browser  window.  You  can  have 

the  resize  action  triggered  dynamically  by  an  action  inserted  in  the 
Timeline  Editor  or  provide  clickable  buttons  or  text  links  if  you  want 
to  enable  the  visitor  to  make  the  decision. 


To  set  up  a Resize  Window  action,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editor  to  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the  Actions  tab  of  the  Button  Inspector,  Image  Inspector, 
or  Text  Inspector. 

2 Choose  the  Resize  Window  option  from  the  Others  submenu  of 
the  Actions  menu  in  the  respective  Inspector. 


Setting  Up  the  Resize  Window  Action  in 
the  Button  Inspector 

Click  the  “+”  button  to  enable  action  attachment. 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 


Choose  the  Resize  Window  option  from  the  Ac- 
tions menu. 

This  option  lets  you  specify  the  new  width  of  the 
browser  window. 

This  option  lets  you  specify  the  new  height  of  the 
browser  window. 


3 Enter  a value  (in  pixels)  in  the  Width  text  box  to  specify  the  width 
the  window  will  be  resized  to  by  the  action. 

4 Enter  a value  (in  pixels)  in  the  Height  text  box  to  specify  the  height 
the  window  will  be  resized  to  by  the  action. 

5 Preview  the  action  in  a 4.x  browser. 


Scroll  Down,  Left, 
Right,  Up 


The  Scroll  Left,  Scroll  Top,  Scroll  Right  and  Scroll  Down  actions  allow 
you  to  dynamically  scroll  the  browser  window.  For  example,  you  can 
use  these  actions  to  let  the  visitor  follow  the  path  of  a floating  box 
traveling  beyond  the  margin  of  the  window. 

To  set  up  a Scroll  Left,  Scroll  Top,  Scroll  Right  or  Scroll  Down  action, 
proceed  as  follows: 

1 If  you  want  to  have  the  window  scroll  dynamically,  Command- 
click  the  Actions  Track  of  the  Timeline  Editor  to  insert  an  action 


Set  Back  Color 
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Setting  Up  the  Scroll. . . Action  in  the 
Action  Inspector 

Choose  the  Scroll  Down  option  from  the  Actions 
menu. 

Use  this  option  to  specify  the  scrolling  distance. 
Use  this  option  to  specify  the  scrolling  speed. 


Set  Back  Color 


3 


marker.  If  you  want  to  leave  the  decision  to  the  visitor,  select  a 
mouse  or  key  event  and  click  the  “+”  button  in  the  Actions  tab  of 
the  Button  Inspector,  Image  Inspector,  or  Text  Inspector. 

2  Choose  the  Scroll  Left,  Scroll  Top,  Scroll  Right  or  Scroll  Down  op- 
tion from  the  Others  submenu  of  the  Actions  menu  in  the  respec- 
tive Inspector.  (We  will  use  Scroll  Down  in  the  following  example. 
The  other  actions  differ  only  in  the  scrolling  direction.) 


□ : : : : : : Action  Inspector  : I i I : : : n : I : n ; 


? Action  ■/]  <7  Scroll  Down  (NS  4,  IE  4) 


Scroll  pixels : 

Scroll  speed : 

1 = slow,  1 00=fast 


3 Enter  a value  (in  pixels)  in  the  Scroll  pixels  text  box  to  specify  the 
amount  of  pixels  by  which  you  want  the  window  to  scroll. 

4 Enter  a value  (in  pixels)  in  the  Scroll  Speed  text  box  to  specify  how 
fast  you  want  the  window  to  scroll.  The  higher  the  value  you  en- 
ter, the  faster  the  scroll  speed. 

5 Preview  the  action  in  a 4.x  browser. 


The  Set  Back  Color  action  lets  you  changethe  background  color  of  the 
browser  window.  You  can  change  the  background  color  either  dy- 
namically by  using  the  Set  Back  Color  action  in  the  Timeline  Editor  or 
you  can  attach  it  to  buttons  or  text  to  let  the  visitor  choose. 

To  set  up  a Set  Back  Color  action  in  the  Timeline  Editor  or  attach  it  to 
a button  image  or  hyperlink  text  in  the  Layout  view,  proceed  as  fol- 
lows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editorto  insert 
an  action  marker,  or  select  a mouse  or  key  event  and  click  the  “+” 
button  in  the/tcf/onstab  of  the  Button  Inspector  or  Text  Inspector. 
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Setting  Up  an  Set  Back  Color  Button  in  the 
Action  Inspector 

Use  this  option  to  choose  a mouse  or  key  event 
that  triggers  the  action. 


Click  the  “+”  button  to  enable  action  attachment. 


Choose  Set  Back  Color  from  the  Actions  menu. 

Use  this  option  to  select  a dynamic  background 
color. 


2  Choose  Set  Back  Color  from  the  Others  submenu  of  the  Actions 
menu  of  the  respective  Inspector. 


3 Click  the  Background  Color  field  to  open  the  Color  Palette. 

4 Choose  a color  from  any  tab  (preferably  a browser-safe  color 
from  the  Real  Web  Colors  tab;  see  page  504),  and  drag  it  from  the 
preview  pane  of  the  Color  Palette  onto  the  Background  Color 
field. 

5 Preview  the  action  in  a 4.x  browser  (see  page  563). 


Condition 


The  Condition  action  monitors  the  browser  window  for  the  occur- 
rence or  non-occurrence  of  an  event  (either  a single-shot  or  a recur- 
ring event)  and  triggers  two  other  actions  if  the  specified  condition  is 
true  or  false.  You  can  choose  between  two  conditions,  that  is,  the 
Timeout  and  Intersection  actions  (see  page  305).  This  action  runs 
without  any  user  input,  so  it  is  best  used  with  an  action  item  in  the 
head  section  of  the  page. 

To  set  up  a Condition  action,  proceed  as  follows: 

1 Insert  an  Action  Item  in  the  head  section  of  the  page  (see 
page  246). 


Action  Group 
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2 Choose  the  Condition  option  from  the  Specials  submenu  of  the 
Actions  menu  at  the  top  of  the  Action  Inspector. 

Setting  Up  the  Condition  Action  in  the 
Action  Inspector 


This  popup  menu  lets  you  specify  when  and  how 
the  action  should  be  executed. 

Choose  the  Condition  option  from  the  Actions 
menu. 


Choose  the  condition  from  the  second  Actions 
menu:  Timeout  or  Intersection. 

If  you  opt  for  the  Timeout  action  as  condition,  en- 
ter a timeout  period  in  seconds  here. 


Go  to  the  Condition  tab  and  select  the  Intersection  or  Timeout  ac- 
tion as  condition.  (For  instructions  on  using  the  Intersection  or 
Timeout  action  please  refer  to  the  section  Idle,  Intersection,  and 
Timeout  later  in  this  chapter.) 

Go  to  the  True  tab  and  specify  an  action  to  be  executed  when  the 
specified  condition  evaluates  to  true. 

Go  to  thefo/setab  and  specify  an  action  to  be  executed  when  the 
specified  condition  evaluates  to  false.  For  example,  if  you  have 
an  image  on  your  page,  you  can  use  the  Set  Image  URL  action 
(page  280)  to  swap  the  image  content  based  on  the  result  of  the 
condition  action. 

Preview  the  action  in  a 4.x  browser  (see  page  563). 
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Action  Inspector 


Exec.  OnLoad 


-J  Name 


9 Action  y 1 "U  Condition  (NS  4,  IE  4) 
Condition  ) True  ^ False 


? Action  ^ | 0 Timeout  (NS  3,  IE  3) 
Timeout  (secs.)  1 2 .000000  | 


- This  text  box  lets  you  name  the 
action,  so  you  can  call  it  using 
the  Call  Action  action. 


The  options  on  the  True  tab  let 
you  specify  an  action  to  be  exe- 
cuted when  the  condition  evalu- 
ates to  true. 

- The  options  on  the  False  tab  let 
you  specify  an  action  to  be  exe- 
cuted when  the  condition  evalu- 
ates to  false. 


Action  Group 


The  Action  Group  action  lets  you  group  other  actions  and  run  them 
all  at  the  same  time.  This  action  is  most  useful  on  the  actions  track 
of  the  Timeline  Editor  (see  page  232),  but  can  also  be  used  with  but- 
tons or  a text  link  if  you  want  to  leave  the  decision  to  the  visitor 
whether  he  or  she  wants  to  run  the  grouped  actions. 

To  set  up  an  Action  Group  action,  proceed  as  follows: 

1 Command-click  the  Actions  Track  of  the  Timeline  Editorto  insert 
an  action  marker. 

2 Select  the  Action  Group  option  from  the  Specials  submenu  of  the 
Actions  menu  at  the  top  of  the  Action  Inspector. 
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Setting  Up  the  Action  Group  Action  in  the 
Action  Inspector 

Choose  the  Action  Group  option  from  the  first  Ac- 
tions menu. 

Click  the  “+”  button  to  add  an  action  placeholder, 
then... 


. . . pick  an  action  from  this  menu  to  add  it  to  the 
Action  Group. 

Typical  options  appear  for  the  selected  action. 


j 


3 Click  the  “+”  button  to  add  an  action  placeholder. 

4 Select  any  option  from  the  second  Actions  menu  at  the  bottom  of 
the  Action  Inspector. 

5 Repeat  steps  3 and  4 until  you  have  added  all  desired  actions  to 
the  Action  Group. 

6 Preview  the  action  in  a 4.x  browser. 


Call  Action  The  Call  Action  action  available  from  the  Specials  submenu  of  the  Ac- 

tions menu  calls  an  action  from  the  head  section  of  the  page.  In  or- 
der for  the  Call  Action  action  to  work,  the  trigger  for  the  action  in  the 
header  must  be  set  to  OnCall  (see  Action  Triggers  on  page  273).  The 
following  screenshot  shows  what  you  can  do  with  the  Call  Action  ac- 
tion. 


Setting  Up  a Call  Action  in  the  Image 
Inspector 


This  popup  menu  lets  you  select  the  named  ac- 
tion from  the  head  section  you  want  to  have  exe- 
cuted when  the  visitor  clicks  the  image. 

This  icon  lets  you  switch  between  constants,  vari- 
ables and  actions. 


Call  Function 
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The  Call  Action  action  can  be  used  to  make  your  actions  modularand 
easier  to  maintain.  For  example,  when  your  page  contains  two  links 
that  jump  to  the  same  URL  (one  at  the  top,  one  at  the  bottom),  you 
define  the  GoToURL  action  once  in  the  header  and  connect  it  with  a 
button  and  a text  link.  If  you  should  decide  to  change  the  URL  ad- 
dressed by  the  two  controls  later  on,  you  will  only  need  to  change  it 
once. 

By  clicking  the  small  icon  next  to  the  Action  popup  menu  you  can 
specify  who  should  supply  the  name  of  the  action: 

[gi  The  red  “C”  icon  (default)  displays  a popup  menu  to  let 

^ ' you  pick  an  action. 

njTl  The  green  question  mark  icon  displays  a popup  menu 
that  lets  you  choose  an  action. 

[a|  The  blue  ball  icon  displays  a popup  menu  that  lets  you 
select  a variable  of  the  type  “Action  name”  that  holds  an 
action  name. 

Call  Function 

The  Call  Function  action  from  the  Specials  submenu  of  the  Actions 
menu  calls  a function  from  the  head  section  of  the  page  or  an  exter- 
nal JavaScript  library.  In  order  for  the  Call  Function  action  to  work, 
you  must  create  a function  in  the  head  section  using  the  JavaScript 
Editor. 

A\ 

/ • 

Action-based  JavaScript  calls  will  make  it  easier  for  JavaScript- 
savvy  developers  to  create  new  actions. 

Idle,  Intersection,  and 
Timeout 

This  action  inserts  a script  that  monitors  the  browser  window  for  a 
user-specified  condition  and  triggers  other  actions,  depending  on 
whether  the  condition  is  true  or  false.  You  can  choose  between  two 
conditions:  Timeout  and  Intersection.  The  Idle  action  is  best  used  in 
the  head  section  of  the  page  as  the  conditions  are  to  be  checked  au- 
tomatically. 

Basic  Settings 

To  set  up  a Timeout  action,  proceed  as  follows: 

1 Insert  an  Action  Item  in  the  head  section  of  the  page  (see 
page  246). 
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Setting  Up  the  Idle  Action  in  the 
Action  Inspector 

Choose  the  Idle  option  from  the  Actions  menu. 

Check  this  option  if  you  want  to  monitor  the 
browser  window  for  a single-shot  event. 

The  options  on  this  condition  let  you  specify  the 
condition. 

Choose  the  condition  from  the  second  Actions 
menu:  Timeout  or  Intersection. 

If  you  opt  for  the  Timeout  action  as  condition,  en- 
ter a timeout  period  in  seconds  here. 


2 Choose  the  Idle  option  from  the  Specials  submenu  of  the  Actions 
menu  in  the  Action  Inspector. 


J 
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Using  the  Timeout  Action 


The  Timeout  action  is  a timer  and  switch  combination.  It  lets  you 
specify  a time  span  after  which  the  browser  should  switch  between 
two  states.  The  condition  it  monitors  is  “false”  while  the  timeout  pe- 
riod still  lasts  and  returns  “true"  when  the  timeout  period  has 
elapsed.  Either  state  has  its  own  action.  You  can  use  this  action  to  im- 
plement a timed  switch  in  the  browser  window-for  example,  to 
switch  the  content  of  a banner  image. 

To  set  up  a Timeout  action,  proceed  as  follows: 

1 Select  the  Condition  tab  (page  302)and  choose  the  Timeout  op- 
tion from  the  Specials  submenu  of  the  Actions  menu. 

2 If  you  want  the  action  to  terminate  the  first  time  the  Timeout 
condition  is  true,  enable  the  Exit  Idle  if  Condition  returns  true  op- 
tion. By  activating  this  option,  you  instruct  the  browser  to  switch 
states  once  only. 

Enter  a time  span  in  seconds  in  the  Timeout  in  Seconds  text  box. 
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4  Click  the  True  tab  and  select  the  action  to  be  triggered  when  the 
Timeout  limit  has  elapsed.  In  the  following  example,  the  Timeout 
action  triggers  a Set  Image  URL  action  (see  page  280),  causing  the 
browser  to  change  the  content  of  an  image. 


Setting  up  the  Condition  for  the  Timeout 
Action  in  the  Action  Inspector 


Check  this  option  if  you  want  to  have  the  browser 
switch  states  once  only. 

Click  this  tab  to  specify  the  action  to  be  executed 
when  the  condition  evaluates  to  true. 

Select  the  desired  action  from  the  popup  menu. 

The  options  that  appear  in  this  section  depend 
on  the  action  you  choose. 


J 


5 Cl ick  the  Fo/se  tab  and  choose  the  action  to  be  executed  while  the 
Timeout  period  still  lasts.  In  the  example  shown  above,  you 
would  use  a second  Set  Image  URL  action  that  supplies  an  alter- 
native image. 

6 Preview  the  action  in  a 4.x  browser. 

The  Intersection  Condition 

The  Intersection  condition  monitors  the  browser  window  for  the 
physical  intersection  of  two  floating  boxes.  It  is  true  when  the  float- 
ing boxes  overlap  in  the  browser  window  and  false  if  they  don’t.  You 
can  use  the  result  of  this  action  to  trigger  two  further  actions. 

This  action  supplements  the  Drag  Floating  Box  (see  page  288J  action. 
An  intersection  occurs  when  the  paths  of  two  floating  boxes  cross. 
The  Intersection  action  may  be  connected,  for  example,  with  a Set 
Back  Color  action  (see  page  301),  causing  the  browser  to  change  the 
background  color. 


308 


CHAPTER  5 


Dynamic  HTML 


To  set  up  an  Intersection  action  as  a condition,  proceed  as  follows: 

1  Click  the  Condition  tab,  then  choose  the  Intersection  option  from 
the  Specials  submenu  of  the  Actions  menu. 


Setting  up  the  Condition  for  the  Timeout 
Action  in  the  Action  Inspector 

Choose  Idle  from  the  actions  menu. 

Check  this  option  if  you  want  to  monitor  the 
browser  window  for  a single-shot  event 

Click  this  tab  to  specify  the  condition. 

Choose  the  condition  from  the  second  Actions 
menu:  Timeout  or  Intersection. 

.elect  the  floating  boxes  to  be  monitored  for  in- 
ersection. 


□ ;;; ;;;;;;;;;;;;; ;;;;;;;;;;;  Action  Inspector 


? Action  ■/!  Q Idle  (NS  4,  IE  4) 

Exit  Idle  If  Condition  returns  True 
' Condition  ) True  ] Fa1se~^ 


- ? Action  w | (£]  Intersection  (NS  4,  IE  4) 


Floating  Box 
Floating  Box 


layer 


layer2 


This  action  returns  true  if  both  specified  Floating 
Boxes  will  be  intersected  otherwise  it  returns 
false. 


2 If  you  want  the  action  to  terminate  the  first  time  the  Timeout 
condition  is  true,  enable  the  Exit  Idle  if  Condition  returns  true  op- 
tion. By  activating  this  option,  you  instruct  the  script  to  monitor 
the  browser  window  for  a single-shot  event. 

3 Select  the  floating  boxes  you  wantto  monitorforthe  intersection 
from  the  two  Floating  Box  popup  menus. 

4 Click  the  True  tab  and  choose  the  action  you  want  to  have  trig- 
gered when  an  intersection  occurs. 

5 Click  the  False  tab  and  choose  the  action  to  be  executed  while  the 
floating  boxes  don’t  overlap. 

6 Preview  the  action  in  a 4.x  browser. 


Key  Compare  The  KeyCompare  action  from  the  Specials  submenu  of  the  Actions 

menu  launches  an  action  when  the  visitor  hits  a selected  key.  This  ac- 
tion is  designed  for  use  with  the  Idle  action,  which  goes  into  the  head 
section  of  the  page  because  it  must  load  ahead  of  the  visible  page 
content.  You  can  use  this  action,  for  example,  to  simulate  Windows- 
style  access  keys  for  objects  on  your  page.  The  following  screenshot 
illustrates  how  you  set  up  a KeyCompare  action. 
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Setting  Up  a KeyCompare  Action  in  the 
Action  Inspector 

This  popup  menu  lets  you  specify  when  and  how 
the  action  should  be  executed. 

First,  select  Idle  from  the  Specials  submenu  of  the 
upper  Actions  menu. 


Second,  select  KeyCompare  from  the  Specials  sub- 
menu of  the  bottom  Actions  menu. 

Third,  use  this  text  box  to  enter  an  ASCII  character 
code  for  the  keystroke  you  want  to  use  for  trigger- 
ing an  action. 


•T 


Fourth,  click  the  True  tab  and  specify  the  ac- 
tion you  want  to  the  browser  to  trigger  when 
it  receives  the  designated  keystroke. 


To  set  up  a KeyCompare  action,  proceed  as  follows: 

1  Drag  the  Action  Item  icon  from  the  CyberObjects  tab  of  the  Palette 
into  the  head  section  of  the  page. 


2  Go  to  the  Inspector  window,  now  titled  Action  Inspector,  and 
choose  Idle  from  the  Specials  submenu  of  the  upper  Actions 
menu. 


3  Go  to  the  Condition  tab  and  choose  KeyCompare  from  the  Specials 
submenu  of  the  lower  Actions  menu. 


4 Enter  the  ASCII  character  code  that  corresponds  to  the  desired 
keystroke  in  the  CharCode  text  box. 

5 Click  the  True  tab  and  choose  the  action  you  want  the  keystroke 
to  trigger. 

6 Return  to  the  page  and  add  a visual  hint  for  the  visitor,  for  exam- 
ple an  instruction  like  “Press  K”. 


Do  not  specify  an  action  on  the  False  tab.  A keystroke  is  a single- 
shot event  whose  absence  need  not — and  must  not — be  mon- 
itored. 


Variables  Adobe  GoLive  features  a set  of  actions  that  allows  Web  authors  to  use 

variables.  You  can  use  variables  as  an  input  to  other  scripted  actions, 
replacing  settings  you  would  make  in  the  respective  Inspector. 

There  are  two  major  uses  for  variables  defined  with  the  Set  Variable 
action: 

• You  can  use  variables  as  pseudo-constants  to  specify  a fixed 
value  for  another  action. 

• You  can  dynamically  store  object  properties  in  variables  at  run- 
time and  set  a cookie  to  write  them  to  the  visitor’s  hard  disk. 
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This  is  possible  for  selected  properties  of  the  browser  window, 
such  as  background  color. 


Declaring  a Variable  To  use  a variable  in  a page,  you  must  declare  it  first.  The  following 

screenshot  illustrates  how  you  declare  a variable  using  the  Declare 
Variable  action. 


Declaring  a Variable  in  the 
Action  Inspector 

This  popup  menu  lets  you  specify  when  and  how 
the  action  should  be  executed. 

Choose  Declare  Variable  from  the  Actions  menu. 
Use  this  text  box  to  enter  a name  for  the  variable. 

Use  this  popup  menu  to  choose  the  data  type  of  the 
variable. 

Select  this  checkbox  to  have  the  browser  set  a cook- 
ie for  storing  the  value  of  the  variable. 


Boolean 

Integer 

Float 

String 

Layer 

Layer  Position 


Image 

URL 


OnCall  Action 
Function 


To  declare  a variable,  proceed  as  follows: 

1 Drag  the  Action  Item  icon  from  the  CyberObjectstah  of  the  Palette 
into  the  head  section  of  the  page. 

2 Go  to  the  Inspector  window,  now  titled  Action  Inspector,  and 
choose  Set  Variable  from  the  Variables  submenu  of  the  Actions 
menu. 

3 Enter  a variable  name  in  the  Name  text  box.  Make  sure  that  its 
name  is  not  used  by  any  other  JavaScript  item  in  the  page  and 
follows  the  standard  JavaScript  naming  conventions  for  vari- 
ables: variable  names  must  consist  of  alphabetical  characters 
only.  Digits,  dashes,  slashes,  and  other  non-alpha  characters  are 
not  allowed. 

4 Choose  an  appropriate  data  type  from  the  Type  menu: 

- Boolean : any  on/off  state  in  the  current  page 

- Integer:  any  integer  value  in  the  current  page 

- Float:  any  floating  point  value  in  the  current  page 

- String:  any  string  value  in  the  current  page 

- Layer:  any  floating  box  in  the  current  page 

- Layer  Position:  location  of  a floating  box  in  the  current  page 

- Image:  any  image  in  the  current  page 

- URL:  any  URL  in  the  current  page 
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- Color:  any  color  in  the  current  page 

- Scene:  any  scene  in  the  current  page 

- OnCall  Action:  any  action  from  the  head  section  of  the  page 
whose  trigger  is  set  to  OnCall  (see  page  273) 

- Function:  any  function  declared  in  the  head  section  of  the 
page 

5 Use  the  Cookie  text  box  to  enter  the  name  of  the  cookie  in  which 
you  want  to  store  the  value  of  the  variable  on  the  visitor’s  hard 
disk.  You  will  use  the  Write  Cookie  and  Read  Cookie  actions  ex- 
plained laterinthissectiontosetthecookieand  read  its  content, 
respectively. 


Initializing  a Variable  After  declaring  a variable,  you  may  want  to  initialize  it.  The  following 

screenshot  illustrates  how  you  initialize  a variable  using  the  Init  Vari- 
able action. 


Initializing  a Variable  in  the 
Action  Inspector 

Choose  Init  Variable  from  the  Actions  menu. 

Choose  the  variable  to  be  initialized  from  this  pop- 
up menu. 

Use  the  respective  options  to  set  an  initial  value  for 
the  variable  (example:  color  field  for  variable  of 
type  color). 


To  initialize  a variable,  proceed  as  follows: 

1 Drag  th e Action  Item  icon  from  the  CyberObjects  tab  of  the  Palette 
into  the  head  section  of  the  page. 

2 Go  to  the  Inspector  window,  now  titled  Action  Inspector,  and 
choose  Init  Variable  from  the  Variables  submenu  of  the  Actions 
menu. 

3 Choose  the  variableyou  wantto  initialize  from  the  Variables  pop- 
up menu. 

4 The  Value  item  changes  automatically  with  the  type  of  the  vari- 
able. Use  the  appropriate  control  to  supply  an  initial  value: 

- Boolean:  a checkbox  (selected  is  true,  deselected  is  false) 

- Integer:  a text  box  that  accepts  whole  numbers  only 
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- Float:  a text  box  that  accepts  numbers  with  decimal  points 

- String:  a text  box  that  accepts  any  string  of  text 

- Layer:  a popup  menu  showing  all  floating  boxes  in  the  page 

- LayerPos:  two  x and  y text  boxes  for  the  position  of  a floating 
box  and  a Get  button  that  reads  the  current  position 

- Image:  a popup  menu  listing  the  named  images  in  the  cur- 
rent page 

- URL:  a typical  text  box,  Browse...  button  and  Point  & Shoot 
button  combination  for  specifying  URLs 

- Color:  a color  field  that  brings  up  the  Color  Palette  when 
clicked 

- Scenes:  a popup  menu  that  lists  all  scenes  in  the  current  page 

- OnCall Action:  a popup  menu  listing  all  actions  from  the  head 
section  that  have  their  trigger  set  to  OnCall  (see  page  273) 

- Functions:  a popup  menu  that  lists  all  function  declarations 
from  the  head  section  of  the  current  page 


Reading  a Cookie  The  Read  Cookie  action  lets  you  retrieve  information  stored  in  a 

cookie  at  runtime.  The  following  screenshot  illustrates  how  you  set 
up  a Read  Cookie  action  that  recovers  a value  stored  in  a cookie. 


Setting  Up  a Read  Cookie  Action  in  the 
Action  Inspector 

Choose  Read  Cookie  from  the  Actions  menu. 

Use  this  text  box  to  specify  which  cookie  should  be 
read. 


There  are  two  options  for  reading  a cookie  in  Adobe  GoLive:  you  can 
have  your  site  read  a cookie  when  your  page  loads,  or  when  a visitor 
mouse-clicks  on  an  item  on  your  page. 

To  have  the  browser  read  the  cookie  when  the  page  loads: 

1 Drag  the  Action  Item  icon  from  the  CyberObjects  tab  of  the  Pal- 
ette into  the  head  section  of  the  page. 

2 Choose  Read  Cookie  from  the  Variables  submenu  of  the  Actions 


menu. 
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3 Enter  the  name  of  the  cookie  specified  in  the  Write  Cookie  action 
in  the  Name  text  box. 

To  have  the  browser  read  a cookie  when  a visitor  mouse  clicks  on  a 

specific  item  in  your  page: 

1 Create  a text  link,  image  or  button  image. 

2 Go  to  the  Inspector  window  and  add  an  action  by  selecting  an 
item  from  the  events  list  and  clicking  the  “+”  button  on  the/\c- 
tions  tab  of  the  respective  Inspector. 

3 Choose  Read  Cookie  from  the  Variables  submenu  of  the  Actions 
menu. 

4 Enter  the  name  of  the  cookie  specified  in  the  Write  Cookie  action 
in  the  Name  text  box. 


Testing  a Variable  at  Test  Variable  is  an  extension  to  the  Idle  action  that  allows  you  to  read 

Runtime  the  current  value  of  a variable  and  compare  it  with  a value  you  spec- 

ify. This  comparison  evaluates  either  to  “true”  or  “false”,  and  the  re- 
sult can  be  used  to  trigger  two  alternative  actions.  The  following 
screenshot  illustrates  how  you  set  up  a Test  Variable  action. 


Setting  Up  a Test  Variable  Action  in  the 
Action  Inspector 

Choose  Idle  from  the  top  Actions  menu. 

Select  this  option  if  you  want  the  Idle  action  to  stop 
monitoring  the  variable  after  the  first  match. 


Choose  Test  Variable  from  the  bottom  Actions 
menu.  , 

Choose  the  variable  whose  value  you  want  to  test 
from  this  popup  menu. 

Use  the  respective  options  to  specify  a value  you 
want  to  compare  the  variable  with  (for  example, 
here  we  have  a URL  which  will  be  compared  with 
another  URL  stored  in  the  cookie. 

Choose  a comparison  operator  from  this  popup 
menu. 


Action  Inspector 


{ 


Exec.  [ OnLoad  Name  | EI291  A5441 


? Action  ^1  £►  Idle  (NS  4,  IE  4) 

Exit  Idle  If  Condition  returns  True 
Condition  ^ True  ^ False  ^ 


? Action  „|  ?®  Test  Variable  (NS  2,  IE.. 
Variable | myPrefURL 

Value  http://wv.apple.com 


Hi 


0 Absolute  [ Brovse.. 


| Equal 


Hi 


To  set  up  a Test  Variable  action,  proceed  as  follows: 

1 Drag  the  Action  Item  icon  from  the  CyberObjects  tab  of  the  Palette 
into  the  head  section  of  the  page. 

2 Go  to  the  Inspector  window,  now  titled  Action  Inspector,  and 
choose  Idle  from  the  Variables  submenu  of  the  upper  Actions 
menu. 

3 Go  to  the  Condition  tab  of  the  Idle  action  and  choose  Test  Variable 
from  the  Variables  submenu  of  the  lower  Actions  menu. 
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4 Choose  the  variable  whose  value  you  want  to  compare  from  the 
Variables  popup  menu. 

5 The  Value  item  changes  automatically  with  the  type  of  the  vari- 
able. Use  the  appropriate  control  to  supply  a value  (like  the  URL 
in  the  example  shown  above)  you  want  to  test  the  variable 
against,  as  set  out  in  the  preceding  section  on  variable  initializa- 
tion. 

6 Go  to  the  Operator  popup  menu  to  specify  the  type  of  the  com- 
parison. The  menu  shot  to  the  left  shows  your  options. 

Please  note  that  not  all  comparison  operators  work  with  all  types  of 
variables.  For  example,  using  Greater  than  with  a string  variable  will 
result  in  a JavaScript  error  in  the  browser  because  the  browser  ex- 
pects a number. 


Setting  a Variable’s  Value  There  are  situations  where  you  may  want  to  assign  a certain  value  to 

at  Runtime  a variable  at  runtime.  The  following  screenshot  shows  how  you  set 

the  value  of  a variable  using  the  Set  Variable  action. 


Setting  a Variable  in  the  Action  Inspector 


Choose  Set  Variable  from  the  Actions  menu. 

Choose  the  variable  whose  value  you  want  to  set 
from  this  popup  menu. 

Use  the  respective  options  to  set  a value  for  the 
variable  (for  example,  you  can  denote  a color  field 
fora  color  variable). 


To  set  up  a Set  Variable  action,  proceed  as  follows: 

1 Drag  the  Action  Item  icon  from  the  CyberObjectstah  of  the  Palette 
into  the  head  section  of  the  page. 

2 Go  to  the  Inspector  window,  now  titled  Action  Inspector,  and 
choose  Test  Variable  from  the  Variables  submenu  of  the  Actions 
menu. 

3 Set  the  Exec  trigger  to  OnCall  and  enter  a name  for  the  Set  Vari- 
able action  in  the  Name  text  box.  This  is  required  if  you  want  to 
make  the  Set  Variable  action  accessible  at  runtime.  If  you  leave 
the  Exec  trigger  set  to  the  OnLoad  default  value,  the  Set  Variable 
action  is  executed  when  the  page  loads  and  the  new  value  will 
overwrite  your  initialization.  If  you  set  the  trigger  to  OnUnload, 
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you  will  not  be  able  to  set  the  variable  at  runtime  because  the  Set 
Variable  action  runs  when  the  browser  leaves  the  page. 

4 Choose  the  variable  whose  value  you  want  to  set  from  the  Vari- 
ables popup  menu. 

The  Value  item  changes  automatically  with  the  type  of  the  variable. 
Use  the  appropriate  control  to  supply  an  initial  value,  as  explained 
in  the  preceding  section  on  variable  initialization. 


Writing  a Cookie  Cookies  allow  you  to  make  the  value  of  a variable  persistent  by  tem- 

porarily storing  it  on  the  visitor’s  hard  disk.  This  function  enables  you 
to  make  viewer-customizable  pages,  because  it  allows  the  visitor  to 
change  the  properties  of  the  browser  window  and  reload  his  or  her 
own  personalized  version  of  the  page  later  on.  The  following  screen- 
shot  illustrates  how  you  set  up  a Write  Cookie  action  that  sets  a cookie 
at  runtime: 


Setting  Up  a Write  Cookie  Action  in  the 
Action  Inspector 

Choose  Write  Cookie  from  the  Actions  menu. 


Use  this  text  box  to  name  the  cookie. 

Use  this  text  box  to  specify  how  long  the  cookie 
should  last. 

Use  these  options  to  specify  additional  security  at- 
tributes, if  required. 


To  set  up  a Write  Cookie  action,  proceed  as  follows: 

1 Drag  the  Action  Item  icon  from  the  CyberObjects  tab  of  the  Palette 
into  the  head  section  of  the  page. 

2 Go  to  the  Inspector  window,  now  titled  Action  Inspector,  and 
choose  Write  Cookie  from  the  Variables  submenu  of  the  Actions 
menu. 

3 Enter  a name  for  the  cookie  in  the  Name  text  box.  This  name  will 
be  used  when  the  Write  Cookie  action  sets  the  cookie  at  runtime. 

4 In  the  Expires  after  text  box,  enter  an  expiration  date  (in  hours)to 
determine  how  long  the  cookie  will  last  after  it  has  been  set. 

5 Optionally,  the  Path  attribute  lets  you  specify  the  subset  of  URLs 
in  a domain  for  which  the  cookie  is  valid.  If  a cookie  has  already 
passed  domain  matching,  then  the  path  name  component  of  the 
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URL  is  compared  with  the  path  attribute,  and  if  there  is  a match, 
the  cookie  is  considered  valid  and  is  sent  along  with  the  URL  re- 
quest. 

6 Optionally,  you  can  use  the  Domain  text  box  to  specify  a valid  In- 
ternet domain  name.  When  searching  the  cookie  list  for  valid 
cookies,  the  attribute  you  specify  here  for  the  current  cookie  is 
compared  with  the  Internet  domain  name  of  the  host  from 
which  the  URL  will  be  fetched.  If  the  tails  of  both  domain  names 
match,  then  the  cookie  will  go  through  path  matching  to  see  if  it 
should  be  sent. 

7 By  selecting  the  remaining  optional  attribute,  Secure,  you  ensure 
that  the  cookie  will  only  be  transmitted  if  the  communications 
channel  with  the  host  is  a secure  one.  If  secure  is  not  specified,  a 
cookie  is  considered  safe  to  be  sent  in  the  clear  over  unsecured 
channels. 

For  more  detailed  information  on  the  optional  Path,  Domain,  and 

Secure  attributes,  please  refer  to  the  following  Web  page: 

h ttp://home.  netscape.  com/newsref/std/cookie_spec.  h tm  I 


Shifting  Code  to  an  External  Library 

Part  14  explains  how  you  shift  script  code  from  your  pages  to  an  ex- 
ternal JavaScript  library. 


Adobe  GoLive  lets  you  create  an  external  JavaScript  library  file  that 
stores  common  code  from  animated  scenes  created  in  the  Timeline 
Editor,  JavaScript  actions,  image  buttons,  components,  and  other 
DHTML  objects  dealt  with  in  this  chapter.  At  the  same  time,  it  re- 
moves common  code  from  your  pages  and  replaces  it  with  referenc- 
es to  the  library,  leaving  only  page-specific  declarations  and 
parameters  in  place.  The  library  is  then  uploaded  to  the  Web  server 
to  make  it  available  for  every  page  in  the  site  that  needs  the  script. 


Benefits  of  Using  External  JavaScript  Libraries 
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External  JavaScript 
Libraries 


Using  the  JavaScript 
Library  at  Page  Level 


3 


The  JavaScript  Library  Option  on  the 
HTML  Tab  of  the  Page  Inspector 


Use  these  options  to  determine  where  Adobe 
GoLive  stores  common  code  for  scripted  actions 
from  the  current  page. 


Apart  from  streamlining  the  code  in  your  pages,  this  library  offers 
two  advantages: 

• It  remedies  a problem  associated  with  the  structure  of  dynamic 
components:  Adobe  GoLive  invariably  places  common  code  for 
DHTML  items  and  actions  in  the  head  section  of  a page.  While 
this  works  well  with  “straight”  pages,  problems  occurred  in  ear- 
lier versions  whenever  a dynamic  component  contained  DHTML 
items  and  scripted  actions.  As  the  browser  loads  only  the  body 
section  of  a dynamic  component,  it  ignores  any  script  code  con- 
tained in  the  head  section.  This  problem  can  be  solved  by  using 
the  external  JavaScript  library,  making  JavaScript  code  in 
dynamic  components  work  as  expected. 

• The  browser  caches  the  JavaScript  library  file,  making  your 
pages  load  faster. 


You  can  enable  the  JavaScript  library  feature  on  a per-page  basis  and 
have  Adobe  GoLive  shift  the  code  from  the  current  page  to  the  li- 
brary. 

To  shift  code  from  the  current  page  to  the  library,  proceed  as  follows: 

1 Click  the  small  page  symbol  above  the  main  content  area  of  the 
document  window  to  bring  up  the  Page  Inspector  in  the  Inspector 
window. 

2 Switch  to  the  HTML  tab  of  the  Page  Inspector. 


□ Page  Inspector Ej 


Page  f HTML  ^ Pending 

| ColorSync™  ^ 

Write  Page  Tags 

( Select  All  ) 

0 <HTML> 

0 <HEAD> 

0 <TITLE>  (needs  to  be  empty  to  be  omited) 
0 <BODY>  (no  attributes  allowed  to  be  omited) 

JavaScript  Functions 

I®!1  Write  Code  into  page 
O Import  CS  Library 

Settings  to  use  Page  as  a 

( Component  J 

F 

3  Click  the  Import  CS  Library  radio  button  to  have  Adobe  GoLive 
shift  JavaScript  code  from  the  current  page  to  the  external  li- 
brary. 
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Using  the  JavaScript 
Library  by  Default 


The  Preferences  - LiveObjects  Dialog  Box 


Use  these  options  to  determine  where  Adobe 
GoLive  stores  common  code  for  scripted  actions. 


Click  this  icon  to  view  Adobe  GoLive’s  preferences 
for  JavaScript  libraries. 


The  JavaScript  option  in  the  LiveObjects  View  of  the  Preferences  dialog 
box  controls  the  usage  of  the  external  JavaScript  library  in  Adobe 
GoLive,  leaving  the  decision  to  you  whether  you  want  the  program  to 
include  JavaScript  code  from  DHTML  objects  in  any  page  you  create 
(default  behavior)  or  to  shift  it  to  the  external  library. 


Use  the  options  in  the  Preferences  - LiveObjects  dialog  box  or  Page  In- 
spector as  follows: 

• Leave  the  Write  code  to  Page  default  option  activated  to  have 
Adobe  GoLive  include  the  entire  JavaScript  code  in  the  page(s) 
where  the  scripted  action  is  used. 

• If  your  pages  contain  dynamic  components,  select  the  Import 
CSScriptLib  radio  button.  This  option  instructs  Adobe  GoLive  to 
shift  common  code  from  any  page  you  create  from  now  on  to 
the  CSScriptLib.js  script  library.  At  the  same  time,  a file  reference 
is  created  in  the  header  of  each  new  page  you  create  to  ensure 
that  the  common  code  from  the  library  is  available  when  the 
browser  loads  the  page. 


Using  the  JavaScript  Library  by  Default 
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When  you  select  the  Import  CSScriptLlb  radio  button  i n the  Preferenc- 
es-LiveObjects  dialog  box,  Adobe  GoLive  reacts  in  one  of  two  ways,  de- 
pending on  whether  or  not  you  have  a site  document  open. 

• If  the  site  document  is  open,  it  will  create  a library  file  in  a new 
folder  named  Generated  Items  at  the  root  level  of  the  site  folder 
when  you  save  the  page. 

• If  you  don’t  have  a site  document  open  in  the  background  when 
you  save  the  page,  Adobe  GoLive  writes  the  code  to  a default 
library  file  which  can  be  found  in  the  Modules:  JScripts  subfolder 
of  the  Adobe  GoLive  program  folder. 

Selecting  the  Import  CSScriptLib  radio  button  in  the  Preferenc- 
es - LiveObjects  dialog  box  does  not  move  code  from  pages  you 
have  already  saved  to  the  CSScri ptLi b.js  script  library.  To  move 
code  from  those  pages  to  the  library,  you  will  have  to  open 
each  page  and  select  the  Import  CSScriptLib  radio  button  in  the 
HTML  tab  of  the  Page  Inspector. 


Chapter  6 Cascading  Style  Sheets 

This  chapter  describes  Adobe  GoLive’s  user-friendly  im- 
plementation of  Cascading  Style  Sheets  and  introduces 
the  basic  concepts  of  this  emerging  technology. 

General  Adobe  GoLive  is  the  one  of  first  Web  page  editors  to  introduce  sup- 

port for  Cascading  Style  Sheets,  Level  1 (CSS1) — a cutting-edge  tech- 
nology that  gives  Web  designers  an  unprecedented  level  of  control 
over  the  presentation  of  their  pages  and  sites.  Given  the  powerful 
layout  control  tools  available  with  Cascading  Style  Sheets,  it’s  likely 
that  Web  designers  will  gradually  abandon  popular  workarounds, 
such  as  single-pixel  GIFs  and  nested  tables,  as  Web  surfers  begin  to 
adopt  the  new  4.x  generation  Web  browsers. 

Controlling  Typography  Cascading  Style  Sheets  go  far  beyond  the  limited  scope  of  HTML  by 

with  Cascading  style  separating  formatting  from  structure  and  content.  Unlike  HTML, 

Sheets  which  wraps  up  every  item  of  page  content  in  specific  tags  to  pro- 

duce the  desired  appearance,  Cascading  Style  Sheets  let  Web  authors 
control  the  look  of  a page  (or  even  an  entire  site)  by  applying  a stan- 
dardized set  of  formatting  rules  to  isolated  chunks  of  text  or  “across 
the  board”  to  any  given  tag  used  throughout  a Web  page  or  site.  For 
example,  instead  of  inserting  single-pixel  GIF  images  between  char- 
acters to  control  the  spread  of  a header,  you  can  simply  attach  a style 
sheet  specifying  a different  letter  spacing. 

If  you  have  a graphic  design  background  and  some  experience  using 
one  of  the  popular  desktop  publishing  packages,  you  will  soon  feel 
at  ease  with  Adobe  GoLive’s  style  sheet  editing  tools.  In  fact,  you  will 
find  that  it  works  much  like  a style  sheet  editor  in  any  of  the  leading 
word  processors  or  DTP  programs. 
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The  screenshot  below  shows  a text-only  HTML  document  whose  tags 
have  been  formatted  using  a Cascading  Style  Sheet. 


CSS1  Text  Formatting  Example 


This  is  a Header  1 tag  formatted  with  CSS  proper- 
ties like  font  size,  background  color,  and  border. 


This  is  a Header  2 tag  formatted  with  CSS  proper- 
ties like  font  size  and  font  color.  The  varying  font 
sizes  in  the  first  word  are  achieved  by  assigning 
custom  inline  styles  to  each  letter. 


Layout  Q)  [0 ) Source  (t]]  [3^  Preview  □ ")  [~Fi'| 

t>  Q Welcome  to  Adobe  GoLive  4 [ 

1 

Cascading  Style  Sheets,  Level  1 

•*> 

TyPograpny  and  much  more... 

Cascading  Style  Sheets  (CSS)  is  a new  Recommendation  made  by  the  World  Wide  Web  Consortium 
(W3C).  |lntended  to  enhance  the  presentation  of  Web  Pages,  it  gives  Web  authors  and  readers  more  control 
over  the  layout  of  HTML  documents. 

CS  S lets  the  Web  author  control: 

• fonts,  font  sizes,  and  font  colors 

• line  spacing  and  horizontal  alignment 

• margins,  borders  and  indents 

• background  images  and  colors 

...just  to  name  a few. 

T|  M 580  ▼ 

Controlling  Positioning 
with  Cascading  Style 
Sheets 


Cascading  Style  Sheets  also  support  absolute  positioning  of  elements 
on  a page,  which  will  allow  Web  designers  to  gradually  abandon 
HTML  tables  as  a positioning  tool.  Adobe  GoLive  lets  you  position  el- 
ements with  ultimate  ease  and  pixel-level  precision.  You  simply  drag 
the  floating  box  icon  from  the  Palette  at  the  main  document  window, 
place  it  where  desired,  and  fill  it  with  content.  To  rearrange  your 
page  layout,  you  can  drag  floating  boxes  to  any  desired  location  on 
the  page. 


CSS1  Support  in  Adobe  GoLive 


325 


The  screenshot  below  shows  text  and  images  positioned  in  floating 
boxes. 


Using  Floating  Boxes  for  Positioning 
Images  and  Text 


Images  can  be  placed  in  floating  boxes  for  posi- 
tioning ... 


. . . and  the  same  applies  for  text. 


Float.htm 

:0B 

Layout  df  [Bl  Source  [t]  ) [Ml]  d ) Preview  IT3  ) l~H  | 

Q Welcome  to  Adobe  CyberStudio 

& B Es 

Introducing  Floating  Boxes  ... 

The  Latest  Power  Tool  for  Web  Page  Design 


Jsing  Golive  CyberStudio's  positioning  tools  you  can 
place  elements  vhereever  you  like  them  to  appear  on 
pour  page  — vith  pixel-level  precision.  «• 

3uilding  attractive  Web  pages  has  never  been  easier ! 
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Adobe  GoLive  also  employs  absolute  positioning  for  its  built-in  dy- 
namic HTML  objects.  Chapter  5,  Dynamic  HTML,  describes  this  fea- 
ture in  more  detail. 


CSS1  Support  in  Adobe  GoLive  reads  CSS1  -formatted  documents  without  changing 

Adobe  Go  Live  styles  and  formatting  rules.  It  can  display  most  of  the  style  properties 

addressed  in  the  CSS1  specification  and  gives  Web  authors  a large 
choice  of  CSS1  formatting  options,  including: 

• internal  and  external  style  sheets 

• tag  selectors  for  reformatting  the  tags  in  an  HTML  document 

• structure-independent  styles  based  on  classes 

• unique  styles  for  selected  elements  based  on  IDs 

• a wide  choice  of  style  properties,  including  font,  text,  box,  posi- 
tioning, border,  background,  and  list  styles 


Chapter  Overview  In  addition  to  the  preceding  introductory  sections,  this  chapter  is 

subdivided  in  four  parts: 

• Part  75  — A Short  Primer  on  Cascading  Style  Sheets,  starting  on 
page  326,  introduces  basic  concepts  and  explains  Cascading 
Style  Sheets  technology  using  easy-to-understand  source  code 
examples. 
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• Part  7 6 — CSS1  Tools  In  Adobe  GoLive,  starting  on  page  337,  con- 
tains brief  descriptions  of  the  tools  you  will  use  to  create  style 
sheets. 

• Part  77  — Creating  and  Applying  Styles,  sta  rti  ng  on  page  339, 
provides  step-by-step  instructions  for  creating  styles  and  format- 
ting text. 

• Part  7 8 — CSS1  Style  Property  Reference,  starti ng  on  page  351 , 
describes  the  style  properties  that  the  CSS  Selector  Inspector 
offers. 

Part  15 — A Short  Primer  on  Cascading  Style  Sheets 

Part  15  outlines  the  reasons  for  drafting  the  Cascading  Style  Sheets 

specification,  explains  some  basic  concepts,  and  details  the  extent  of 

Adobe  GoLive’s  support  for  Cascading  Style  Sheets. 

This  part  has  eight  sections: 

• The  History  section  on  page  327  outlines  the  reasons  for  creating 
the  Cascading  Style  Sheets  specification. 

• Basic  Style  Sheet  Syntax  on  page  327  explains  how  CSS1  encodes 
formatting  rules. 

• Selectors  on  page  328  describes  the  various  selectors  that  apply 
formatting  rules  to  text  in  an  HTML  document. 

• Inheritance  on  page  329  details  how  formatting  rules  are  han- 
dled within  the  structure  of  an  HTML  document. 

• How  Style  Sheets  Are  Embedded  in  HTML,  beginning  on  page  329, 
spells  out  where  style  sheet  information  is  located  within  the 
structure  of  an  HTML  document. 

• How  Style  Sheets  Cascade  on  page  333  outlines  how  conflicts  are 
resolved  when  multiple  style  sheets  control  the  formatting  of  a 
document. 

• The  CSS1  Formatting  Model  on  page  334  introduces  the  “box” 
concept  that  determines  the  spacing  relationships  in  CSS1 -for- 
matted text  elements. 

• About  Units  in  Style  Sheets,  beginning  on  page  335,  explains  the 
absolute  and  relative  units  of  measurement  that  CSS1  technol- 
ogy uses. 


A Short  Primer  on  Cascading  Style  Sheets 
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Read  this  section  if  you  feel  that  you  need  more  background  in- 
formation; otherwise,  go  directly  to  Part  76  — CSS 7 Tools  in 
Adobe  GoLive.  With  Adobe  GoLive’s  visual  CSS  editing  tools,  you 
can  start  using  Cascading  Style  Sheets  without  a profound 
knowledge  of  the  underlying  code. 


History  Since  the  early  days  of  the  Web,  authors  have  been  seeking  for  tools 

thatwould  enable  them  to  improve  theircontrol  of  the  look-and-feel 
of  their  Web  pages.  Over  the  years,  this  search  has  not  only  given  rise 
to  an  overabundance  of  HTML  tags  but  it  has  also  driven  the  Web  au- 
thoring community  to  develop  unwieldy  workarounds  that  pro- 
duced bulky  code  without  improving  the  impact  of  the  Web  pages  by 
the  same  extent.  In  other  words,  authors  bought  better  layout  con- 
trol but  let  the  audience  pay  for  it  by  incurring  longer  download 
times  and  browser  compatibility  problems. 

W3C,  the  World  Wide  Web  Consortium,  has  responded  to  this  prob- 
lem by  developing  Cascading  Style  Sheets.  The  CSS1  document  has 
evolved  into  a stable  specification  and  is  supported  by  major  Web 
browser  products,  including  Microsoft  Internet  Explorer  3.0  and  4.0, 
as  well  as  Netscape’s  Navigator  4.0  and  Communicator  4.0  products. 
(You  can  find  Cascading  Style  Sheets,  Level  7,  at  http://www.w3.org/ 
TR/REC-CSSI-96'1217.)  This  emerging  technology  promises  to  over- 
come many  of  the  limitations  imposed  by  “classic  HTML,”  especially 
with  respect  to  positioning  type  and  other  elements. 


Basic  Style  Sheet 
Syntax 


Regardless  of  the  way  CascadingStyleSheetsare  incorporated  in  your 
documents,  the  basic  syntax  is  always  the  same.  Style  sheet  specifi- 
cations— commonly  referred  to  as  rules — consist  of  a single  line  of 
text  with  the  following  basic  notation: 

selector  { property:  value  } 

The  selector  element  is  an  HTML  tag  or  another  item  that  the  CSS1 
syntax  can  address.  The  property  e lement  defines  a style  feature  that 
the  content  will  have  when  rendered  by  the  browser,  and  value  spec- 
ifies how  this  feature  is  rendered. 

The  following  is  an  example  of  a basic  style  sheet  rule: 

HI 

{ 

font-weight:  bold; 
font-size:  24pt 

} 
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This  rule  instructs  the  browser  to  display  the  first-level  header  in  24 
point  size  and  bold  typeface,  overriding  the  browser’s  HTML  prefer- 
ences. 


Unlike  in  a printed  document,  the  structure  of  an  HTML  page  deter- 
mines its  formatting.  Tags  that  identify  the  position  within  that  struc- 
ture enclose  the  content.This  underlying  principle  makes  it  difficult 
to  address  individual  items  of  text  for  formatting,  thus  creating  a 
need  for  a different  addressing  mechanism.  CSS1  uses  selectors  to 
solve  that  problem.  A selector  is  a string  of  code  that  identifies  what 
elements  the  corresponding  rule  applies  to.  It  connects  the  HTML 
page  with  the  style  sheet. 

Selectors  may  consist  of  several  components: 

• Tags:  All  HTML  tags  are  possible  selectors.  If  used  as  a selector, 
the  enclosing  greater  than  and  less  than  characters  are  removed. 

• Classes : All  elements  inside  the  “BODY”  section  can  be  classed  by 
adding  a “CLASS”  attribute.  Classes  can  then  be  addressed  in  the 
style  sheet  to  apply  the  formatting  rules.  A class  definition  con- 
sists of  a period  followed  by  string  of  text  and  a rule — for  exam- 
ple. headline  {color:  green}.  When  defining  classes  in  Adobe 
GoLive,  you  don’t  have  to  enter  the  period;  the  program  will 
automatically  add  the  period  to  the  source  code. 

Two  major  classes  of  selectors  are  used  with  Cascading  Style  Sheets: 

• Simple  Selectors  match  elements  based  on  the  element  type 
and/or  attributes,  not  the  element’s  position  in  the  document 
structure.  “HI”  (all  level  1 headers)  and  “HI. headline”  (all  level  1 
headers  with  the  CLASS  attribute./7m///V?e)  are  examples  of  sim- 
ple selectors. 

• Contextual  Selectors  match  elements  based  on  their  position  in 
the  document  structure.  A contextual  selector  consists  of  several 
simple  selectors.  “HI. headline  B”  (all  level  1 headers  with  the 
CLASS  attribut e.headllne  and  bold  typeface)  is  an  example  of  a 
contextual  selector  consisting  of  two  simple  selectors,  “HI. head- 
line” and  “B”.  Future  versions  of  Adobe  GoLive  will  support  con- 
textual selectors. 

The  ID  selector  is  a special  case:  It  allows  for  setting  style  properties 
on  a per-element  basis.  It  addresses  a single  element  within  the 
HTML  document  by  adding  an  ID  attribute  with  an  alphanumeric 
identifier.  In  the  style  sheet,  the  same  identifier  is  combined  with  a 
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rule  to  apply  special  formatting.  An  ID  definition  consists  of  a pound 
sign  (#)  followed  an  alphanumerical  identifier  and  a rule — for  exam- 
ple, #xy99  {font-weight:  WO}. 


If  you  assign  a style  to  an  HTML  tag,  its  children  inherit  those  style 
specifications.  Suppose  there  is  an  “HI”  tag  with  a style  property 
“blue”  and  an  in-line  emphasized  element: 

<Hl>The  headline  <EM>is</EM>  blue.</Hl> 

If  no  color  has  been  assigned  to  the  in-line  “EM”  element,  the  em- 
phasized “is”  will  inherit  the  color  of  the  parent  element,  that  is,  it 
will  also  display  in  blue.  Other  style  properties  are  likewise  inher- 
ited— for  example,  font-family  and  font-size. 

As  in  hardcopy  publishing,  the  value  of  a style  property  is  often  given 
as  a percentage  that  refers  to  another  property: 

HI  { font-size:  24pt  } 

Hi  { line-height:  120%  } 

If  a property  can  be  specified  as  a percentage,  the  browser  needs  to 
know  what  property  the  percentage  refers  to.  Children  elements  of 
“HI”  will  inherit  the  computed  value  of  line-height  and  be  set  to  28.8 
pt,  but  they  will  not  inherit  the  percentage. 


Unlike  HTML,  the  CSS1  mechanism  keeps  formatting  instructions  for 
HTML  tags  together  in  a container  enclosed  in  a <STYLE>  tag  (=  the 
style  sheet),  instead  of  interspersing  them  with  the  flow  of  HTML 
code.  When  loading  the  page,  the  browser  reads  the  formatting  in- 
structions contained  in  that  tag  and  caches  them  with  the  page.  Sub- 
sequently, whenever  the  program  finds  an  instance  of  an  HTML  tag 
for  which  custom  format  definitions  exist  in  the  style  sheet,  it  applies 
those  rules. 

Cascading  Style  Sheets  are  embedded  in  the  HTML  using  the 
<STYLE>  tag.  This  tag  has  a TYPE  attribute;  its  value  is  set  to  "text/ 
css"  by  default.  The  TYPE="text/css"  tells  the  browser  to  interpret  any 
formatting  instructions  enclosed  in  the  <STYLE>  tag  as  a CSS1  style 
sheet  and  build  the  screen  display  according  to  the  rules  specified 
within.  Although  CSS1  is  the  predominant  style  sheet  mechanism 
currently  in  use  on  the  Web,  this  type  description  may  reduce  con- 
flicts with  future  style  sheet  mechanisms  on  the  Web. 


330 


Cascading  Style  Sheets 


CHAPTER  6 


External  Style  Sheets 


The  following  is  an  example  of  a basic,  yet  complete  style  sheet: 

<STYLE  type="text/css"> 

< ! — 

hi  {font-size:  36pt} 

— > 

</ STYLE> 

You’ll  notice  that  the  rules  are  enclosed  in  <!-  and  ~>  HTML  com- 
ment tags.  They  instruct  browsers  that  are  unaware  of  the  style  tag 
to  ignore  them  (unknown  tags  are  ignored). 

Adobe  GoLive  supports  the  four  basic  methods  of  embedding.  CSS1 
containment  in  HTML  pages  is  based  on  external  or  internal  style 
sheets. 


External  style  sheets  are  text-only  documents  containing  nothing  but 
style  definitions.  They  can  either  be  referenced  or  imported: 

• A style  sheet  document  can  be  referenced  within  the  HTML  page 
using  the  <LINK>  tag.  By  referencing  external  style  sheets,  style 
definitions  can  be  applied  to  several  pages  at  a time  or  even  to 
all  pages  throughout  a site.  Adobe  GoLive  reads  and  writes  refer- 
ences to  external  style  sheets.  An  example  follows: 

<HTML> 

<HEAD> 

<TITLE>title</TITLE> 

CLINK  RE L= STYLE SHEET  TYPE= " text /css " 

HREF=" http :/ /style . com/ cool " TITLE="Cool "> 
</HEAD> 

<BODY> 

<Hl>This  page  has  an  external  stylesheet  at- 
tached.</Hl> 

</BODY> 

</HTML> 

Word  processor  analogy:  A referenced  external  style  sheet  works 
much  like  a master  style  sheet  in  a word  processor.  As  with  style 
sheets  for  word  processor  files,  some  definitions  are  “hard  wired” 
to  certain  types  of  text.  Also,  you  can  override  the  definitions 
within  the  document  and  assign  styles  explicitly  to  selected  text. 
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• A style  sheet  can  explicitly  import  another  style  sheet  using  a 
dedicated  @import  command.  The  imported  style  sheet  will  be 
merged  with  any  local  style  sheets.  Adobe  GoLive  reads  these 
import  notations  from  existing  files  (if  they  have  the  proper  syn- 
tax) and  lists  them  in  the  Stylesheet  Window,  but  won’t  let  you 
create  any. 

An  example  follows: 

<HTML> 

<HEAD> 

<TITLE>title</TITLE> 

<STYLE  TYPE= "text/ CSS "> 

©import  url (http : / / style . com/basic) ; 

< / STYLE> 

</HEAD> 

<BODY> 

<Hl>This  page  has  an  imported  stylesheet . </Hl> 
</BODY> 

</HTML> 


Internal  style  sheets  are  confined  to  the  document  they  are  con- 
tained in.  There  are  several  methods  for  embedding: 

• An  internal  style  is  based  on  a <STYLE>  tag  with  one  or  more 
selectors  for  HTML  tags  within  the  document.  Embedded  in  the 
header  section,  this  style  sheet  is  only  valid  for  the  local  page. 
This  type  of  style  sheet  applies  uniform  styles  to  several 
instances  of  a tag  within  a document.  Once  these  styles  have 
been  defined,  they  are  automatically  applied  without  any  user 
intervention.  An  example  follows: 

<HTML> 

<HEAD> 

<TITLE>title</TITLE> 

<STYLE  TYPE= "text/ CSS "> 

< ! — 

HI  { 

font -weight : bold; 
font-size:  24pt; 
font-family:  sans-serif; 


</ STYLE> 

</HEAD> 

<BODY> 

<Hl>This  page  holds  an  internal  stylesheet . </Hl> 
</BODY> 

</HTML> 
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Word  processor  analogy:  An  internal  <STYLE>  element  with  tag 
selectors  works  much  like  a word  processor  style  sheet  embed- 
ded in  a file,  the  only  difference  being  that  its  styles  are  “hard- 
wired” to  certain  text  elements.  You  can  change  definitions  with- 
in the  document,  but  you  cannot  assign  a style  explicitly  to  select- 
ed text. 

• Another  type  of  internal  style  sheet  applies  special  formatting  to 
individual  blocks  of  text  within  the  body  section.  It  is  based  on  a 
CLASS  definition  in  the  header  and  local  CLASS  attributes 
assigned  to  selected  tags  or  paragraphs. 

The  CLASS  element  closely  resembles  user-defined  paragraph 
and  character  styles  in  a word  processor  in  that  the  author  cre- 
ates and  applies  the  style  definition.  CLASS  style  elements  are 
easily  recognized  by  their  name,  which  begins  with  a period  as  in 
HI. Headline,  for  example.  Here  is  an  example: 

<HTML> 

<HEAD> 

<TITLE>title</TITLE> 

<STYLE  TYPE= "text/ CSS "> 

< ! — 

HI. headline  { color:  #00FF00  } 

.bodycolored  { color:  #0099FF  } 

— > 

</ STYLE> 

</HEAD> 

<BODY> 

<H1  CLASS=headline>This  headline  is  formatted 
using  a CLASS  element . </Hl> 

<P  CLASS=bodycolored>This  paragraph  has  a 
custom  color. </P> 

</BODY> 

</HTML> 

Word  processor  analogy:  The  CLASS  element  works  much  like  a 
paragraph  or  character  style.  You  can  change  its  definition  within 
the  document  and  assign  it  to  selected  paragraphs. 

The  “ID”  element  is  a special  style  element.  It  also  consists  of  a style 
definition  in  the  header  but  is  locally  confined  to  a unique  element 
within  the  page.  An  alphanumeric  identifier  that  appears  within  the 
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definition  and  the  tag  it  controls  makes  the  assignment.  The  name 
of  ID  style  elements  starts  with  a pound  sign,  as  in  #yz98.  An  exam- 
ple follows: 

<HTML> 

<HEAD> 

<TITLE>title</TITLE> 

<STYLE  TYPE= "text/ CSS "> 

< ! — 

#z99y  { letter-spacing:  2em  } 

— > 

< / STYLE> 

</HEAD> 

<BODY> 

<P  ID=z98y>This  text  has  extra-wide  letter 
spacing. </P> 

</BODY> 

</HTML> 


One  of  the  fundamental  features  of  CSS1  is  that  style  sheets  cascade, 
— in  other  words,  several  style  sheets  may  control  the  same  docu- 
ment and  override  each  other  according  to  certain  rules  of  prece- 
dence. You  can  build  and  embed  or  attach  your  preferred  style  sheet 
when  authoringthe  page,  whilethe  reader  may  havea  personal  style 
sheet  to  customize  the  presentation  of  HTML  pages  to  meet  his  or  her 
own  needs  (if  the  browser  supports  this  feature). 

When  several  style  sheets  try  to  influence  the  presentation,  conflicts 
may  arise.  These  conflicts  are  resolved  by  assigning  each  style  rule  a 
weight.  As  an  author  using  Adobe  GoLive,  you  can  assign  a weight 
when  referencing  external  style  sheets  (see  Referencing  External  Style 
Sheets  on  page  349).  By  default,  the  reader’s  rules  weigh  less  than  the 
rules  that  the  author  specifies.  Consequently,  if  there  are  conflicts  be- 
tween the  style  sheets  of  a document  loaded  by  the  browser  and  the 
reader’s  personal  sheets,  the  author’s  rules  will  override  the  reader’s 
rules.  In  any  case,  both  the  reader’s  and  author’s  rules  override  the 
browser’s  default  values. 

Imported  style  sheets  also  cascade  with  each  other,  in  theorderthey 
are  imported.  Any  rules  specified  in  the  style  sheet  itself  override 
rules  in  imported  style  sheets.  That  is,  imported  style  sheets  are 
lower  in  the  cascading  order  than  rules  in  the  style  sheet  itself. 
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The  CSS1  Formatting  Model 


Cascading  Style  Sheets  are  based  on  a simple  box-oriented  format- 
ting model.  Each  element  consists  of  one  or  more  rectangular  boxes. 
All  boxes  have  a core  content  area  with  optional  surrounding  pad- 
ding, border  and  margin  areas. 


This  formatting  model  gives  Web  authors  much  more  flexibility  in 
controlling  spacing  between  objects.  For  example,  by  setting  the  top 
margin  of  one  element  to  a negative  value,  you  can  make  it  grow 
into  another  element  directly  above  it.  The  screenshot  Using  IDs  to 
Format  Headlines  on  page  344  is  an  example  of  this  use  of  the  mar- 
gin property. 

To  best  visualize  the  box  concept,  choose  a background  color  for  an 
element:  The  result  is  a colored  box  that  extends  over  the  entire 
width  of  the  page  and  whose  height  is  controlled  by  its  text  content. 
You  should  set  aside  a little  time  to  experiment  with  those  proper- 
ties— for  example,  set  the  padding  to  move  the  text  within  away 
from  the  edge  of  the  box. 

For  instructions  on  setting  the  margin,  border,  and  padding  proper- 
ties, please  refer  to  the  section  Box  Properties  on  page  356. 
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Relative  and  Absolute  Length  Units 

The  format  of  a length  value  is  an  optional  plus  (or  minus)  sign  (+  is 
default)  immediately  followed  by  a number  (with  or  without  a deci- 
mal point)  immediately  followed  by  a unit  identifier  such  as  em,  ex, 
or,  pc.  Some  properties  allow  negative  length  units,  but  this  may 
complicate  the  formatting  and  there  may  be  browser-specific  limita- 
tions. 

There  are  two  types  of  length  units:  relative  and  absolute.  Relative 
units  specify  a length  relative  to  another  length  property.  Stylesheets 
that  use  relative  units  will  scale  more  easily  from  one  output  me- 
dium to  another  (for  example,  from  a computer  display  to  a laser 
printer). 

Relative  units  may  also  reduce  the  differences  in  font  size  that  occur 
when  a page  is  viewed  on  different  platforms.  (See  the  discussion  of 
font  size  problems  in  the  section  Things  to  Know  About  Font  Sizes 
Across  Platforms  on  page  126  in  Chapter  4 — Building  Web  Pages.) 

The  following  relative  units  are  supported: 


em 

the  height  of  the  element’s  font 

ex 

the  height  of  the  letter  X 

pixel 

pixels  relative  to  the  resolution  of  the  drawing  area,  that  is,  the  computer  display 

Absolute  length  units  are  only  useful  when  the  physical  properties  of 
the  output  medium  are  known. 

The  following  absolute  length  units  are  supported: 


in 

inches,  1 in  = 2.54cm 

cm 

centimeters 

mm 

millimeters 

12pt 

points,  Ipt  = 1/72  in 

Ipc 

picas,  Ipc  = 12pt 

Percentage  units  (described  below)  and  keyword  values  (for  example 
“xlarge”)  offer  similar  advantages  in  terms  of  scalability  as  relative 
units. 
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Percentage  Units 

The  format  of  a percentage  value  is  an  optional  plus  (or  minus)  sign 
(+  is  default)  immediately  followed  by  a number  (with  or  without  a 
decimal  point)  immediately  followed  by  the  percent  sign 

Percentage  values  are  always  relative  to  another  value — for  exam- 
ple, a length  unit.  Each  property  that  allows  percentage  units  also 
defines  what  value  the  percentage  value  refers  to.  Most  often  this  is 
the  font  size  of  the  element  itself,  such  as  line  height. 

The  screenshot  below  shows  Adobe  GoLive’s  CSS1  Units  and  Colors 
popup  menus  that  appear  with  text  boxes  requiring  numerical  en- 
tries and  color  options,  respectively. 


Adobe  GoLive’s  CSSt  Units  and  Colors 
Popup  Menus 


Unchanged 

Aqua 

Black 

Blue 

Gray  ^ 

Green 

Lime 

Maroon 

Navy 

Olive 

Purple 

Red 

Silver 

Teal 

White 

Yellow 


Keywords 

Many  style  properties  use  keywords  instead  of  numerical  unit  speci- 
fications— for  example,  XX-small  through  X-large  to  specify  font  size 
relative  to  the  parent  element. 


1 Unchanged  | 

Point 

Pica 

* 

Pixel 

em 

ex 

mm 

cm 

Inch 

* 

XX  Small 
X Small 
Small 
Medium 
Large 
X Large 
XX  Large 

Relative 

Smaller 

Larger 


Color  Units 

A color  is  either  a keyword  or  a numerical  RGB  specification,  such  as 
any  color  from  the  Web-Safe  Colors  tab  of  the  Color  Palette. 

The  popup  keyword  color  names  are  aqua,  black,  blue,  fuchsia,  gray, 
green,  lime,  maroon,  navy,  olive,  purple,  red,  silver,  teal,  white,  and 
yellow.  These  16  colors  are  from  the  W3C  palette. 
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Numerical  color  specifications  use  the  RGB  color  model.  The  format 
of  an  RGB  value  in  hexadecimal  notation  is  a “#”  immediately  fol- 
lowed by  either  three  or  six  hexadecimal  characters — for  example, 
“#FFFFFF”  for  white.  The  format  of  an  RGB  value  in  the  functional 
notation  is“rgb”  followed  by  a comma-separated  list  of  three  numer- 
ical values. 


Part  16 — CSS1  Tools  in  Adobe  GoLive 

Part  16  introduces  Adobe  GoLive’s  editing  tools  for  Cascading  Style 

Sheets.  It  is  subdivided  in  four  sections: 

• Style  Sheet  Creation  and  Editing  Tools  on  page  337  gives  a brief 
overview  of  the  tools  you  need  to  create,  edit,  and  manage  style 
sheets  in  Adobe  GoLive. 

• The  Stylesheet  Window,  beginning  on  page  337,  introduces 
Adobe  GoLive’s  repository  for  styles. 

• The  Stylesheet  Toolbar  on  page  338  gives  a brief  overview  of  the 
buttons  on  the  toolbar. 

• The  CSS  Selector  Inspector,  beginning  on  page  339,  describes 
Adobe  GoLive’s  editing  tool  for  style  properties. 


Style  Sheet  Creation  Adobe  GoLive’s  “CSS1  workshop”  consists  of  three  tools  that  let  you 
and  Editing  Tools  create  and  edit  style  sheets: 

• the  Stylesheet  Window 

• the  Stylesheet  Toolbar 

• the  CSS  Selector  Inspector 

Together,  these  three  tools  let  you  use  the  entire  scope  of  selectors 
and  properties  detailed  by  the  CSS1  Specification  and  link  to  external 
style  sheets. 


The  Stylesheet  The  Stylesheet  Window  is  where  you  collect  internal  styles  and  link  to 

Window  external  style  sheets.  It  has  two  tabs,  Internal  and  External.  The  Inter- 

nal tab  lists  all  styles  from  the  document,  including  classes,  tag  selec- 
tors, IDs,  imported  stylesheets,  and  font  faces.  You  can  select  any  tag 
selector,  class,  and  ID  from  the  internal  tab  to  edit  its  properties  in 
the  CSS  Selector  Inspector.  The  Imports  and  Font  Faces  categories  dis- 
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play  the  import  notations  and  font  faces  (if  any)  that  Adobe  GoLive 
finds  when  reading  an  existing  document.  These  items  are  read- 
only; you  can’t  edit  them. 

The  Internal  Tab  of  the  Stylesheet  Window 


Classes  are  listed  on  top  of  the  other  style  catego- 
ries. 


Tag  selectors  are  identified  by  their  tag  name. 


The  External  tab  lists  all  external  style  sheets  that  are  referenced  by 
the  LINK  attribute  of  the  <STYLE>  tag. 

The  External  Tab  of  the  Stylesheet  Window 


Referenced  style  sheets  appear  here,  complete 
with  the  URL  path  to  their  storage  location. 


A companion  External  Stylesheet  Inspector  allows  for  linking  to  and 
opening  external  style  sheets  and  lets  you  select  the  cascading  order. 


The  Stylesheet 
Toolbar 


When  the  Stylesheet  Window  is  the  top  window,  Adobe  GoLive’s  con- 
text-sensitive toolbar  turns  into  the  Stylesheet  Toolbar.  The  Stylesheet 
Toolbar  contains  five  buttons  that  insert  new  classes,  tag  selectors, 
IDs,  or  references  to  external  style  sheets  in  the  Stylesheet  Window 
and  duplicate  existing  items. 


The  Stylesheet  Toolbar 

The  New  Class  button  creates  a new  class. 

The  New  Tag  button  creates  a new  tag  selector. 
The  New  ID  button  creates  a new  ID  selector. 

The  New  Item  button  creates  a new  empty  refer- 
ence to  an  external  style  sheet. 

The  Duplicate  button  duplicates  the  selected  item. 
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The  CSS  Selector 
Inspector 


The  Font  Properties  Tab  of  the 
CSS  Selector  Inspector 


On  eight  tabs,  the  CSS  Selector  Inspector  window  gives  you  a rich 
choice  of  style  options  to  customize  the  typography  and  positioning 
of  text,  including  features  such  as  font  color,  font  weight,  font  size, 
and  leading.  In  the  CSS  Selector  Inspector,  you  can  edit  or  view  the 
properties  of  the  style  selected  in  either  the  Stylesheet  Window  or  the 
CSS  Tab  of  the  Web  Database. 


Later  in  this  chapter,  Part  18  — CSS1  Style  Property  Reference  com- 
pletely explains  Adobe  GoLive’s  CSS1  style  options. 


Part  17 — Creating  and  Applying  Styles 

Part  17  tells  you  how  to  create  a style  sheet  and  add  styles  using  the 

various  selectors  that  Adobe  GoLive  supports.  It  is  subdivided  in  eight 

sections: 

• The  Creating  a Style  Sheet  section  on  page  340  explains  how  to 
create  a style  sheet  in  a document. 

• Creating  Tag  Selectors  on  page  341  teaches  you  how  to  reformat 
the  structure  of  an  HTML  page  with  Cascading  Style  Sheets. 

• Creating  Classes,  beginning  on  page  343,  describes  how  to  create 
structure-independent  text  styles  that  can  be  applied  to  any  ele- 
ment in  a page. 

• The  Creating  IDs  section  beginning  on  page  344  discusses  how  to 
create  unique  formats  for  selected  elements  in  a page. 

• Managing  Styles  on  page  346  outlines  how  you  delete  and  dupli- 
cate styles  in  a style  sheet. 
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• Naming  Styles  and  Viewing  Properties  on  page  346  describes  how 
you  can  view  the  properties  of  a selected  style  and  rename  it. 

• Applying  Styles  from  Internal  Style  Sheets,  begi  n n i ng  on 

page  347,  discusses  how  to  apply  styles  based  on  classes  and  IDs 
to  selected  text. 

• Referencing  External  Style  Sheets  on  page  349  explains  how  you 
can  reference  an  external  style  sheet  text  file  from  within  a page. 

• Previewing  with  Cascading  Style  Sheets,  beginning  on  page  350, 
tells  you  how  to  preview  and  track  CSS  formatting  using  the  Doc- 
ument Layout  Controller. 


Creating  a Style  Sheet 


1 Click  the  CSS  button  Cb  above  the  main  content  area  of  the  doc- 
ument window  to  open  the  Stylesheet  Window  and  create  a style 
sheet  in  the  header  section  of  the  page. 

2 You  are  now  ready  to  add  styles.  (You  can  view  the  style  sheet  in 
Source  mode  after  adding  the  first  style;  it  appears  as  a STYLE  tag 
in  the  HEAD  section.) 


Creating  a style  sheet  is  simple  and  straightforward.  When  you  are 
working  in  Layout  mode,  the  Stylesheet  Window  is  only  a mouse-click 
away. 

To  create  a style  sheet  within  the  current  document,  proceed  as  fol- 
lows: 


To  create  an  external  style  sheet,  proceed  as  follows: 

1 Choose  New  Special  from  the  File  menu  and  Stylesheet  Document 
from  the  submenu  that  appears.  This  opens  the  Stylesheet  Win- 
dow and  creates  a new  empty  style  sheet  that  can  be  saved  to 
disk. 

2 Add  and  edit  new  styles  using  the  toolbar  buttons  and  the  CSS  Se- 
lector Inspector  ( see  the  following  sections). 

3 Save  the  new  style  sheet  to  disk — for  example,  in  your  site  fold- 
er— to  ensure  it  appears  in  the  Site  Window  and  is  within  reach 
of  Point  & Shoot. 

4 For  instructions  on  howto  link  a document  with  or  edit  the  newly 
created  style  sheet,  please  see  Referencing  External  Style  Sheets  on 
page  349. 
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The  Stylesheet  Window  with  Tag  Selectors 

Tag  selectors  are  listed  under  the  “Tags”  category. 


One  of  the  most  useful  features  of  Cascading  Style  Sheets  technology 
is  its  ability  to  reformat  the  visible  part  an  HTML  document  based  on 
its  structure,  that  is,  its  hierarchy  of  tags.  By  using  tags  as  selectors, 
you  can  enhance  the  presentation  of  a document  and  maintain 
downward  compatibility  as  a courtesy  to  visitors  with  non-CSS  brows- 
ers. This  means  that  users  of  4.0  browsers  will  see  the  extra  format- 
ting that  CSS  permits,  while  the  rest  of  your  audience  will  see  a plain 
(but  structured)  document. 

You  can  use  tag  selectors  in  two  different  ways: 

• Simple  tag  selectors  reformat  all  instances  of  a particular  tag 
within  your  page.  For  example,  if  you  create  a style  with  “hi”  as 
the  selector  and  the  text  properties  36  point  and  sans-serif,  all 
<H1>  headers  will  appear  that  way. 

• Contextual  tag  selectors  reformat  all  instances  of  a particular  tag 
enclosed  within  another  tag.  For  example,  if  you  create  a style 
with  “hi  i”  as  the  selector  and  assign  a special  text  color,  a CSS- 
savvy  browser  will  display  all  <l>  tags  within  <H1>  headers  as 
colored  text. 

To  create  a style  based  on  a tag  selector,  proceed  as  follows: 

1 With  the  Stylesheet  Window  in  the  foreground,  click  the  New  Tag 
button  [«]  in  the  Stylesheet  Toolbar. 

2 A new  style  appears  in  the  Stylesheet  Window,  listed  in  the  Tags 
category. 

The  following  screenshot  shows  the  Stylesheet  Window  with  a 
newly  created  “h2”  tag  selector. 


3 Leave  the  new  style  selected  and  go  to  the  CSS  Selector  Inspector. 

4 Locate  the  Name  text  box  in  the  Property  Viewer  tab  of  the  CSS  Se- 
lector Inspector  and  enter  the  tag  selector  of  your  choice.  Tag  se- 
lectors are  HTML  start  tags  with  the  greater  than  and  less  than  (< 
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and  >)  characters  stripped  off — for  example,  “h2”  for  second-lev- 
el  headers,  “p”  for  plain-text  paragraphs,  “i” for  italicized,  and  “b” 
for  boldface  inline  formatting.  Press  the  Return  key  to  confirm. 


You  can  also  reformat  the  hyperlinks  in  your  page  by  using  “A” 
as  a tag  selector. 


5 Now  go  to  the  other  tabs  of  the  CSS  Selector  Inspector  and  add 
style  properties,  as  desired. 

For  a complete  reference  of  Adobe  GoLive’s  CSS1  style  options, 
see  the  section  CSS 7 Style  Property  Reference  later  in  this  chapter. 

6 Any  new  style  properties  you  add  are  automatically  applied  to 
any  paragraph  or  block  of  text  formatted  with  the  tag  used  as  the 
selector.  The  text  formatting  is  updated  within  the  document 
window  to  reflect  the  new  style  properties. 

The  following  screenshot  shows  the  CSS  Selector  Inspector  after  you 
have  edited  the  properties  of  the  new  “h2”  tag  selector. 


The  CSS  Selector  Inspector  Showing  Tag 
Selector  Properties 

Use  the  Name  text  box  to  specify  a tag  selector. 

After  you  have  edited  the  tag  selector,  its  style  prop- 
erties are  listed  here. 


Please  note  that  the  current  release  of  Adobe  GoLive  doesn’t 
display  formatting  created  by  contextual  selectors.  You  will 
have  to  preview  your  page  in  a CSS-savvy  4.0  browser  to  see  the 
result. 
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The  Stylesheet  Window  with  a Class  Style 
Classes  appear  above  the  other  categories. 


As  with  paragraph  and  character  styles  in  word  processors  or  DTP 
programs,  you  can  apply  classes  to  any  selected  block  of  text,  inde- 
pendent of  the  structure  of  an  HTML  document.  Typical  uses  of 
classes  include  distinctive  formatting  for  warning  notes  or  other  spe- 
cial information-carrying  elements  that  need  to  stand  out  from  the 
rest  of  the  text.  You  can  also  use  classes  to  create  typographical  ef- 
fects, such  as  varying  font  sizes  or  font  colors  within  a word. 

There  are,  however,  some  caveats  in  using  classes:  Do  not  use  classes 
to  visually  structure  a document.  Not  only  will  this  effect  be  com- 
pletely lost  on  visitors  with  non-CSS  browsers,  but  even  worse,  they 
will  see  a completely  unstructured  presentation  of  your  document. 
Instead,  restrict  the  use  of  classes  to  local  formatting,  such  as  for  in- 
line text  or  single  paragraphs. 

To  create  a style  based  on  a class,  proceed  as  follows: 

1 With  the  Stylesheet  Window  in  the  foreground,  click  the  New  Class 
button  Q in  the  Stylesheet  Toolbar. 

2 A new  style  appears  in  the  Stylesheet  Window,  listed  on  top  of  the 
other  categories. 

The  following  screenshot  shows  the  Stylesheet  Window  with  a 
newly  created  “mboldclass”  item. 


3 Leave  the  new  style  selected  and  go  to  the  CSS  Selector  Inspector. 

4 Locate  the  Name  text  box  in  the  Property  Viewer  tab  of  the  CSS  Se- 
lector Inspector  and  enter  a class  name  of  your  choice.  You  can 
use  any  alphanumeric  character  string  as  a class  name — for  ex- 
ample, “myboldclass”.  You  don’t  have  to  enter  the  leading  peri- 
od; Adobe  GoLivedoesthisautomatically.  Press  the  Return  keyto 
confirm. 

5 Now  go  to  the  other  tabs  of  the  CSS  Selector  Inspector  and  add 
style  properties,  as  desired. 


344 


Cascading  Style  Sheets 


CHAPTER  6 


The  following  screenshot  shows  the  CS5  Selector  Inspector  after  you 
have  edited  the  properties  of  the  new  “myboldclass”  style. 


The  CSS  Selector  Inspector  Showing  Class 
Properties 

Use  the  Name  text  box  to  enter  a class  name. 

After  you  have  edited  the  class,  its  style  properties 
are  listed  here. 


6 To  apply  the  class  style,  select  a range  of  text  (anything  from  a sin- 
gle character  to  multiple  paragraphs)  in  the  document  window 
and  use  the  options  in  the  Style  tab  of  the  Text  Inspector  (see  Ap- 
plying Styles  from  Internal  Style  Sheets  on  page  347). 


Creating  IDs  Unlike  classes,  which  you  can  apply  to  an  unlimited  number  of  ele- 

ments, IDs  let  you  embed  a specific  style  for  a unique  paragraph  or 
range  of  text  in  your  document.  Use  IDs  for  a headline  with  special 
formatting  (see  the  example  below)  or  any  other  text  that  needs 
unique  treatment. 


Using  IDs  to  Format  Headlines 


The  “TravelEZ”  item  is  a normal  paragraph  for-  - 
matted  with  an  ID.  Its  style  properties  include  font 
style  and  size,  background  and  text  color,  mar- 
gins, and  padding. 

The“#1  Newsletter ...”  item  is  also  a normal  para- 
graph formatted  with  an  ID.  Its  style  properties  in- 
clude font  style  and  size,  as  well  as  negative 
margins  that  let  it  grow  into  the  “TravelEZ”  item. 


trauelezcss.html 


Laaout  ml  n=Q  Source  sunn  Preview  □ 1HI 


> g)  Newsletter  ToC 
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Featured  this  week: 

New  flight  schedules 
Dream  vacations 
Hawaii  on  a budget 
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To  create  a style  based  on  an  ID,  proceed  as  follows: 

1 With  the  Stylesheet  Window  in  the  foreground,  click  the  New  ID 
button  | in  the  Stylesheet  Toolbar. 
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The  Stylesheet  Window  with  an  ID  Style 
ID  styles  are  listed  under  the  “IDs”  category. 


The  CSS  Selector  Inspector  Showing  ID 
Properties 

Use  the  Name  text  box  to  enter  a class  name. 

After  you  have  edited  the  class,  its  style  properties 
are  listed  here. 


2 A new  style  appears  in  the  Stylesheet  Window,  listed  in  the  ID  cat- 
egory. 

3 Leave  the  new  style  selected  and  go  to  the  CSS  Selector  Inspector. 

4 Locate  the  Name  text  box  in  the  Property  Viewer  tab  of  the  CSS  Se- 
lector Inspector  and  enter  a unique  ID  name  of  your  choice — for 
example,  “myheaderid”.  You  can  use  any  alphanumeric  charac- 
ter string  with  a leading  pound  sign  (“#”)  as  the  ID  name.  Press 
the  Return  key  to  confirm. 

The  following  screenshot  shows  the  Stylesheet  Window  with  a 
newly  created  “myheaderid”  style. 


□ ^^=destunkn.html:Stylesheet  0 g 

Internal  ^ External  ) 

Style 

•V  <>]  Tags 

*7  n]  ids 

t>  Imports 

[>  jlI  Font  Faces 

<1  !► 

5  Now  go  to  the  other  tabs  of  the  CSS  Selector  Inspector  and  add 
style  properties,  as  desired. 

The  following  screenshot  shows  the  CSS  Selector  Inspector  after 
you  have  edited  the  properties  of  the  new  “myheaderid”  style. 


6  Applying  the  ID  style  requires  that  you  hand-edit  the  source  code 
of  your  page  (see  Applying  Styles  from  Internal  Style  Sheets  on 
page  347). 
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Managing  Styles  The  Stylesheet  Window  lets  you  duplicate  and  delete  styles  as  follows: 

• Duplicate  styles  by  selecting  them  and  clicking  the  Duplicate 
button  QtJ  in  the  Stylesheet  Toolbar.  Duplicating  a style  creates 
an  exact  copy,  complete  with  all  style  properties. 

• Delete  styles  by  selecting  them  (multiple  selections  are  sup- 
ported) and  choosing  the  Clear  command  from  the  Edit  menu  or 
pressing  the  Backspace  key. 


Naming  Styles  and 
Viewing  Properties 


The  Property  Viewer  tab  of  the  CSS  Selector  Inspector  lets  you  name  or 
rename  a style  and  view  the  style  options  you  select  in  the  other  tabs 
of  the  CSS  Selector  Inspector. 


The  Property  Viewer  Tab  of  the 
CSS  Selector  Inspector 

Jse  this  text  box  to  name  or  rename  styles. 


Styles  properties  are  listed  here. 


To  view  the  properties  of  a style  in  the  Property  Viewer  tab  or  rename 

it,  proceed  as  follows: 

1 Select  the  style  in  the  Stylesheet  Window  or  the  CSS  tab  of  the  Web 
Database. 

2 Open  the  context-sensitive  Inspector  window  (if  not  already 
open). 

3 The  CSS  Selector  Inspector  appears,  with  the  Property  Viewer  tab 
in  the  front. 

4 Select  the  style  name  in  the  Nametext  box  and  type  a new  name, 
if  desired.  Don’t  forget  the  pound  sign  (#)  in  front  of  ID  names. 
Adobe  GoLive  automatically  inserts  the  period  in  front  of  CLASS 


names. 
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Preceding  sections  on  style  creation  discuss  the  Name  text  box 
and  its  associated  style  naming  conventions.  Please  refer  to  them 
to  learn  more  about  its  use. 

5 Look  at  the  list  box  below  the  Name  text  box  to  view  the  style 
properties. 


Applying  Styles  from 
Internal  Style  Sheets 


The  Style  Tab  of  the  Text  Inspector 


Styles  are  applied  in  three  alternative  ways,  depending  on  their  se- 
lectors. Styles  assigned  to  HTML  tags  via  tag  selectors  are  applied  au- 
tomatically, while  classes  require  that  you  select  text  and  apply  them 
manually.  The  latter  occurs  in  the  Style  tab  of  the  Text  Inspector, 
which  lists  all  classes  existing  in  the  page’s  internal  or  an  external 
style  sheet. 

IDs  are  a special  case  because  of  ambiguities  that  are  still  unsolved 
in  the  Cascading  Style  Sheets  specification.  The  current  release  of 
Adobe  GoLive  lets  you  create  IDs,  but  you  have  to  hand-code  in 
Source  mode  to  use  them  in  your  page.  A future  release  will  offer  a 
more  user-friendly  solution. 

□ Text  Inspector B 
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To  apply  classes,  proceed  as  follows: 

• Select  a block  of  text  within  a paragraph,  locate  the  desired 
style,  then  click  a checkbox  in  the  Inline  column  of  the  respec- 
tive row  to  create  an  inline  style. 

• Place  the  cursor  in  a paragraph,  locate  the  desired  style,  then 
click  a checkbox  in  the  Par  column  of  the  respective  row  to  for- 
mat the  entire  paragraph  with  that  style. 
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• Put  the  cursor  in  a paragraph,  locate  the  desired  style,  then  click 
a checkbox  in  the  Div  column  of  the  respective  row  to  format 
the  entire  paragraph  with  that  style  and  create  a division  that  is 
disconnected  from  the  normal  flow  of  HTML. 

• Place  the  cursor  anywhere  in  the  document,  locate  the  desired 
style,  then  click  a checkbox  in  the  Area  column  of  the  respective 
row  to  apply  that  format  to  the  body  section  of  the  page. 


To  apply  an  ID,  proceed  as  follows: 

1 Note  the  name  of  the  desired  ID  from  the  Stylesheet  Window. 

2 Switch  to  Source  mode  by  clicking  the  Source  tab  rider  in  the  doc- 
ument window. 

3 Locate  the  paragraph  or  block  of  text  to  which  you  want  to  assign 
the  ID  and  remove  all  other  formatting  to  reduce  the  risk  of  am- 
biguity. 

4 If  the  text  to  be  reformatted  is  a paragraph,  hand-edit  the  <P> 
tag  by  inserting  the  ID  as  an  attribute  in  the  start  tag.  For  exam- 
ple, if  the  ID  name  is  ttheaderbox,  edit  the  code  as  follows: 

- Your  original  source  code  looks  like  this: 

<P>TravelEZ</P> 


After  you  insert  the  ID  attribute,  your  source  code  should  look 
like  this: 

<P  ID="headerbox">TravelEZ</P> 


5  If  the  text  to  be  reformatted  is  a block  of  text  within  a paragraph, 
you  will  have  to  enclose  that  text  in  a <SPAN>  or  <DIV>  tag  and 
insert  the  ID  as  an  attribute  in  the  start  tag.  For  example,  if  the 
ID  name  is  #headerbox,  edit  the  code  as  follows: 

- Your  original  source  code  looks  like  this: 

<P>Welcome  to  TravelEZ</P> 


After  you  insert  the  <SPAN>  tag  with  the  ID  attribute,  your 
source  code  should  look  like  this: 

<P  <SPAN  ID="headerbox">Welcome  to  TravelEZ<SPAN/ 
></P> 


6  Switch  back  to  Layout  mode  to  view  the  effect.  If  you  are  not  sat- 
isfied with  the  result,  select  the  ID  style  in  the  Stylesheet  Window 
and  edit  its  properties  as  desired. 
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Referencing  External  The  External  tab  of  the  Stylesheet  Window  lists  all  external  stylesheets 

Style  Sheets  referenced  by  the  current  page.  In  conjunction  with  the  Stylesheet 

Toolbar  and  the  External  Stylesheet  Inspector,  it  also  lets  you  link  to 
an  external  style  sheet — both  on  your  local  hard  disk  and  out  on  the 
Web. 


The  External  Tab  of  the  Stylesheet  Window 

□ CSSexample.html:Stylesheet 

a@ 

Internal  { External  ) 

Filename  ^ | | URL 

Referenced  style  sheets  appear  here,  complete  

4jL  HW5HHPS1  ✓ /Mac0S8/Desktop9520Folder  /Sites  /N< 

with  the  URL  path  to  their  storage  location. 

4"'! 

!► 

An  Empty  Reference  in  the  Stylesheet 
Window 

An  empty  reference  is  a placeholder  for  linking 
with  a physical  style  sheet. 


To  reference  an  external  style  sheet,  proceed  as  follows: 

1 Click  the  External  tab  in  the  Stylesheet  Window. 

2 Click  the  New  Item  button  J in  the  Stylesheet  Toolbar. 

3 A new  empty  reference  to  an  external  style  sheet  appears  in  the 
Stylesheet  Window. 


4 Select  the  empty  reference  and  go  to  the  External  Stylesheet  In- 
spector. 

5 In  the  External  Stylesheet  Inspector,  type  in  the  URL  path  and  file- 
name of  the  style  sheet  in  the  URL  text  box,  click  the  Browse  but- 
ton to  locate  the  style  sheet  in  the  subsequent  file  selection 
dialog,  or  click  the  Point  & Shoot  button  to  link  to  a style  sheet  in 
the  Site  Window. 


The  External  Stylesheet  Inspector 


Useany  of  these  options  to  linktoan  external  style 
sheet. 


Click  this  button  to  open  an  external  style  sheet  for  - 
editing. 

Use  these  buttons  to  change  the  cascading  order  - 
of  multiple  external  style  sheets. 


External  Stylesheet  Inspector  B 


. . /Newsletter%20Site^20F  older  /n 


| Absolute  | Browse...  I 


Document 

Move 


Open 
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This  checkbox  converts  the  path  to 
the  referenced  stylesheet  to  an 
absolute  path.  This  option  is  dis- 
cussed in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute  Paths 
on  page  719  in  Chapter  17,  Manag- 
ing Web  Sites  with  Adobe  GoLive. 
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6 If  you  need  more  than  one  style  sheet,  repeat  steps  2 through  5. 

7 If  the  referenced  style  sheet  contains  tag  selectors  that  match  the 
HTML  tags  used  in  your  document,  the  document  will  be  refor- 
matted automatically. 

8 Use  the  Move  Up  and  Move  Down  buttons  in  documents  with  sev- 
eral external  style  sheets  to  change  the  cascading  order.  The 
Move  Up  button  increases  the  weight  of  a style  sheet.  If  conflicts 
arise  between  style  rules,  its  styles  take  precedence  over  those 
from  style  sheets  that  are  lower  in  the  cascade.  The  Move  Down 
button  decreases  the  weight  of  a style  sheet. 

9 Once  you  have  referenced  a style  sheet  on  your  local  hard  disk, 
you  can  open  it  for  editing  (if  it  is  not  write-protected): 

- Select  the  style  sheet  in  the  Stylesheet  Window. 

- Click  the  Open  button  in  the  External  Stylesheet  Inspector. 

- The  styles  from  the  external  style  sheet  appear  in  the 
Stylesheet  Window  now,  where  you  can  click  and  edit  them 
using  Adobe  GoLive’s  CSS  editing  tools. 


Previewing  with 
Cascading  Style  Sheets 


CSS  Previewing  Options  in  the  Layout 
View  Controller 


Use  this  option  to  toggle  style  sheets  on  and  off. 

Use  this  option  to  preview  elements  with  negative 
margin  values. 

Choose  an  option  from  this  popup  menu  to  pre- 
view your  page  on  multiple  platforms. 

Use  this  option  to  mark  up  CSS-formatted  links. 

Use  this  option  to  mark  up  a class  or  ID. 

Use  this  option  to  mark  up  a tag  with  CSS  format- 
ting. 


Adobe  GoLive’s  Layout  View  Controller  contains  a selection  of  tools 
for  previewing  pages  formatted  with  Cascading  Style  Sheets.  It  lets 
you  disable  style  sheets  to  view  the  page  as  it  would  appear  in  a non- 
CSS  browser  or  choose  one  of  the  default  style  sheets  from  the  Web 
Database  (see  page  748)  to  simulate  the  appearance  of  your  page  in 
several  browsers  on  the  two  major  platforms. 


□ Layout  Yiev  Controller 
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Use  the  CSS  options  in  the  Layout  View  Controller  as  follows: 

1 In  Layout  mode,  click  the  “eye”  button  ® in  the  upper  right  cor- 
ner of  the  document  window  to  open  the  Layout  View  Controller. 

2 Click  the  Use  Stylesheets  checkbox  repeatedly  to  toggle  CSS  for- 
matting on  and  off  and  check  if  the  page  looks  acceptable  in 
plain  HTML. 

3 Check  the  Allow  overlapping  paragraphs  checkbox  to  preview 
how  elements  with  negative  margin  values  grow  into  adjacent  el- 
ements. 

4 Select  the  options  from  the  Root  menu  one  by  one  to  let  Adobe 
GoLive  simulate  the  look  of  your  page  in  Windows-based  or  Mac- 
intosh-based browsers.  This  previewing  feature  is  based  on  the 
default  style  sheets  stored  in  the  CSS  tab  of  the  Web  Database. 
(See  The  CSS  Tab  on  page  748  in  Chapter  78,  The  Web  Database.) 

5 Select  an  option  from  the  Links  menu  to  mark  up  hyperlinks  with 
extra  CSS  formatting. 

6 Choose  an  option  from  the  Mark  Style  menu  to  mark  elements 
formatted  with  classes  or  IDs. 

7 Select  an  option  from  the  Links  menu  to  mark  tags  formatted 
with  tag  selectors. 


Part  18 — CSS1  Style  Property  Reference 

Part  18  presents  the  style  properties  that  Adobe  GoLive  supports  and 

suggests  where  to  find  browser  compatibility  information.  It  has  nine 

sections: 

• The  General  section  on  page  352  explains  the  purpose  of  the 
CSS  Selector  Inspector,  discusses  to  what  extent  Adobe  GoLive 
supports  the  CSS1  Specification,  and  recommends  where  to  find 
information  on  CSS1  browser  compatibility. 

• Font  Properties,  starting  on  page  353,  introduces  the  Font  Prop- 
erties tab  of  the  CSS  Selector  Inspector  and  gives  detailed  instruc- 
tions for  using  font  style  options. 

• Text  Properties,  starting  on  page  355,  introduces  the  Text  Proper- 
ties tab  of  the  CSS  Selector  Inspector  and  details  how  to  use  spac- 
ing and  text  style  options. 

• The  Box  Properties  section,  starting  on  page  356,  explains  the 
Box  Properties  tab  of  the  CSS  Selector  Inspector  and  gives  detailed 
instructions  for  using  margin,  padding,  and  floating  properties. 
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• Positioning  Properties,  starting  on  page  359,  introduces  the  Posi- 
tioning Properties  tab  of  the  CSS  Selector  Inspector  and  describes 
how  to  use  positioning,  clipping,  stacking,  and  overflow  options. 

• Border  Properties  on  page  361  presents  the  Border  Properties  tab 
of  the  CSS  Selector  Inspector  and  provides  detailed  instructions 
for  creating  visual  borders  around  text  elements  and  para- 
graphs. 

• The  Background  Properties  section,  starting  on  page  362,  intro- 
duces the  Background  Properties  tab  of  the  CSS  Selector  Inspector 
and  describes  using  the  background  image  and  color  as  well  as 
tiling  options. 

• List  Properties,  starting  on  page  363,  introduces  the  List  Proper- 
ties tab  of  the  CSS  Selector  Inspector  and  discusses  using  list  for- 
matting options. 

• Specifying  Unsupported  Properties  on  page  364  explains  how  to 
specify  format  options  that  Adobe  GoLive’s  style  property  inven- 
tory does  not  cover. 


General 


As  noted  before  in  the  description  of  the  CSS  Selector  Inspector,  this 
window  contains  the  entire  inventory  of  style  properties  that  Adobe 
GoLive  currently  supports.  The  style  inventory  covers  the  major  part 
of  the  CSS1  specification,  with  the  exception  of  some  style  options 
that  cause  problems  in  all  major  browsers. 

You’ll  find  the  following  information  useful  as  a reference  when  ed- 
iting style  sheets  selected  in  the  Stylesheet  Window. 


Currently,  all  4.0  browsers  display  only  a few  style  properties. 
Some  properties  work  with  a single  browser  only,  some  don’t 
work  at  all  but  cause  no  harm,  and  others  let  the  browser 
crash.  When  applying  a style  property  to  your  pages,  make  sure 
you  test  it  in  all  major  browsers  that  claim  to  support  Cascading 
Style  Sheets.  For  a listing  of  browser-safe  features,  please  visit 
Web  Review’s  Style  Sheets  Reference  Guide  at  http://www.webre- 
view.com/guides/style/#charts 


Fort  Properties 
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Font  Properties  The  Font  Style  tab  of  the  CSS  Selector  Inspector  lets  you  define  a font 

family  and  make  font  style  settings,  including  color,  font  size,  and 
line  height. 


The  Font  Style  Tab  of  the 
CSS  Selector  Inspector 

Use  this  option  to  specify  a font  color. 

Use  this  option  to  specify  a relative  or  absolute 
font  size. 

Use  this  option  to  specify  line  height  as  an  abso- 
lute value  or  a percentage. 

Use  this  option  to  control  the  slant  of  the  font  fam- 
ily. 


This  list  box  shows  the  members  of  the  font  family. 


Use  this  text  box  and  the  popup  menu  to  edit  the 
font  family. 

Use  these  buttons  to  shift  a font  up  and  down  in 
the  list. 


J 


Use  this  option  to  control  the 
weight  of  the  font  family. 


Use  any  of  these  options  to  add 
special  formatting  to  the  font 


To  edit  the  font  properties  of  a style  in  the  Font  Family  tab,  proceed 

as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window. 

2 With  the  new  style  still  selected,  click  the  Font  Style  tab  rider  of 
the  CSS  Selector  Inspector. 

3 Choose  a font  color  from  the  CSS1  Colors  popup  menu  or  drag  in 
a selection  from  the  Web-Safe  Colors  tab  of  the  Color  Palette.  This 
option  sets  the  foreground-color  property  for  the  current  style. 

4 Go  to  the  Size  text  box.  This  option  sets  the  font-size  property  for 
the  current  style. 

Choose  an  absolute,  relative,  or  length  unit,  ora  percentage  from 
the  CSS 7 Units  popup  menu,  then  enter  a number  in  the  Size  text 
box.  After  you  press  the  Return  key,  the  specified  size  will  appear 
in  the  text  box,  along  with  the  selected  unit. 

5 Go  to  the  Line  Height  text  box.  This  option  sets  the  line-height 
property  for  the  current  style — that  is,  the  distance  between  the 
baselines  of  two  adjacent  lines  of  text. 

Pick  a unit  (we  recommend  percent  to  maintain  scalability)  from 
the  CSS1  Units  popup  menu,  then  enter  a value  in  the  Line  Height 
text  box.  Press  the  Return  key  and  the  specified  height  will  ap- 
pear in  the  text  box,  along  with  the  selected  unit. 
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6 Go  to  the  Style  popup  menu.  This  option  sets  the  font-style  prop- 
erty for  the  current  style,  addressing  the  Normal  (sometimes 
called  “roman”),  Italic,  and  Oblique  font  faces  within  a font  fam- 
ily. 

7 Go  to  the  Weight  popup  menu.  This  option  sets  the  font-weight 
property  for  the  current  style,  similar  to  the  various  font-weight 
specifications  used  in  the  DTP  world,  such  as  Regular,  Roman, 
Book,  Medium,  Semi-  or  DemiBold,  Bold,  Black,  and  others. 

Choose  any  value  from  100  to  900.  Each  number  represents  a 
font  weight,  with  the  keywords  Normal  and  Bold  used  instead  of 
400  and  700,  respectively.  The  Lighter  and  Bolder  values  select 
font  weights  that  are  relative  to  the  weight  inherited  from  the 
parent  element. 

8 Go  to  the  Font  Family  list  box.  This  option  sets  the  font-family 
property  for  the  current  style,  letting  you  choose  your  preferred 
font  or  specify  a list  of  fonts  to  be  used  alternatively.  You  can 
choose  between  the  fonts  installed  on  your  system  and  general 
font  specifications,  such  as  serif,  sans-serif,  fantasy,  and  cursive. 
(See  Fonts  Preferences  on  page  100  for  instructions  on  setting  de- 
fault fonts  for  these  general  specifications.)  To  add  a new  font  to 
the  family,  proceed  as  follows: 

- Click  the  New  button  below  the  list  box.  A new  FontName  en- 
try will  appear  both  in  the  list  box  and  the  text  box  below. 

- Type  a font  name  in  the  text  box  or  select  a system  font  from 
the  popup  menu  to  the  right,  then  press  Return  to  add  the 
font  to  the  list.  A checkmark  appears  to  the  left  of  the  font 
name. 

Repeat  the  steps  listed  above  to  add  more  font  choices  to  the 
font  family. 

- To  change  the  order  of  preference,  select  an  entry  from  the 
list  and  use  the  Up  and  Down  buttons  to  shift  the  selection. 

9 Go  to  the  Decoration  section  and  select  additional  formatting  for 
the  text-decoration  property,  such  as  Underline,  Strike,  Overline, 
or  Blink,  if  you  want. 
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Text  Properties 

The  Text  Properties  Tab  of  the 
CSS  Selector  Inspector 

Use  this  option  to  indent  the  text. 

Use  this  option  to  control  inter-word  spacing. 

Use  this  option  to  control  character  spacing. 

Use  this  option  to  set  the  vertical  alignment. 

Use  this  option  to  select  small  caps. 

Use  this  option  to  control  capitalization  and  case. 
Use  this  option  to  set  the  horizontal  alignment. 


The  Text  Properties  tab  of  the  CSS  Selector  Inspector  lets  you  define 
various  spacing,  case,  and  alignment  properties  for  the  current  style. 


To  edit  the  spacing,  case,  and  alignment  properties  of  a style  in  the 
Text  Properties  tab,  proceed  as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window  if  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  Text  Properties  tab  of  the 
CSS  Selector  Inspector. 

3 Go  to  the  Text  Indent  text  box.  This  option  sets  the  text-indent 
property  for  the  current  style. 

Choose  a length  unit  or  a percentage  from  the  CSS1  Units  popup 
menu,  then  enteran  indentation  in  the  Text  Indent  text  box.  After 
you  press  the  Return  key,  the  specified  indentation  will  appear  in 
the  text  box,  along  with  the  selected  unit. 

4 Go  to  the  Word  Spacing  text  box.  This  option  sets  the  word-spac- 
ing property  for  the  current  style,  specifying  an  addition  to  the 
default  space  between  words. 

Choose  a length  unit  from  the  CSS 7 Units  popup  menu,  then  en- 
ter a number  in  the  Word  Spacing  text  box.  Press  the  Return  key 
and  the  specified  spacing  will  appear  in  the  text  box,  along  with 
the  selected  unit. 

5 Go  to  the  Letter  Spacing  text  box.  This  option  sets  the  letter-spac- 
ing property  for  the  current  style,  specifying  an  addition  to  the 
default  space  between  individual  letters. 

Choose  a length  unit  from  the  CSSL  Units  popup  menu,  then  en- 
ter a number  in  the  Letter  Spacingtext  box.  After  you  press  the  Re- 
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csslBase  Align 
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Super 
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Text  Top 
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Text  Bottom 


turn  key,  the  specified  spacing  will  appear  in  the  text  box,  along 
with  the  selected  unit. 

6  Go  to  the  Vertical  Align  popup  menu.  This  option  sets  the  vertical- 
align  property  for  the  current  style,  specifying  the  vertical  posi- 
tioning of  the  element  it  is  assigned  to. 


Choose  an  option  from  the  CSS1  Units  popup  menu: 


cssBaseAlign 

aligns  the  baseline  of  the  element  with  the  baseline  of  the  parent  element 

Sub 

subscripts  the  element 

Super 

superscripts  the  element 

Top 

aligns  the  top  of  the  element  with  the  tallest  element  on  the  line  (relative  to  the 
formatted  line  that  the  element  is  a part  of) 

Text  Top 

aligns  the  top  of  the  element  with  the  top  of  the  parent  element's  font 

Middle 

aligns  the  vertical  midpoint  of  the  element  (typically  an  image)  with  the  baseline 
plus  half  the  x-height  of  the  parent 

Bottom 

aligns  the  bottom  of  the  element  with  the  lowest  element  on  the  line  (relative  to 
the  formatted  line  that  the  element  is  a part  of) 

Text  Bottom 

aligns  the  bottom  of  the  element  with  the  bottom  of  the  parent  element's  font 

1 Unchanged 
Capitalize 


Lowercase 
None 


7 Go  to  the  Font  Variant  popup  menu  to  select  small  caps. 

8 Go  to  the  Transformation  popup  menu  to  select  Capitalization, 
Uppercase,  or  Lowercase. 

9 Go  to  the  Alignment  popup  menu  and  select  a horizontal  align- 
ment, if  desired.  Options  include  Left,  Center,  Right,  and  Justify. 


Box  Properties  The  Box  Properties  tab  of  the  CSS  Selector  Inspector  lets  you  define  the 

properties  of  the  “box”  (see  The  CSS1  Formatting  Model  on  page  334) 
generated  by  the  current  style,  including  its  visual  and  non-visual 
properties. 
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The  Margins  Tab  of  the 
CSS  Selector  Inspector 

Use  these  options  to  set  the  invisible  margin 
around  an  element. 


Use  these  options  to  set  the  distance  between  the 
border  and  the  content  of  an  element. 


Use  these  options  to  control  the  positioning  and 
size  of  floating  elements. 


3 


Use  this  option  to  format  the  ele- 
ment as  a floating  box. 

Use  this  option  to  clear  or  allow 
floating  boxes  on  either  side  of  the 
element. 


To  edit  the  box  properties  of  a style  i n the  Box  Properties  tab,  proceed 

as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window  if  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  Box  Properties  tab  rider 
of  the  CSS  Selector  Inspector. 

3 Go  to  the  Margin  section.  Its  options  set  the  margin , margin-top, 
margin-right,  margin-bottom,  and  margin-left  properties — that 
is,  the  invisible  margin  for  any  element  formatted  with  the  cur- 
rent style.  You  can  also  decrease  the  spacing  toward  surrounding 
elements.  Negative  values  cause  two  elements  to  overlap. 
Choose  a length  unit  or  a percentage  (recommended  for  better 
scalability)  from  the  CSS 7 Units  popup  menu,  then  enter  a num- 
ber in  any  of  the  Top,  Right,  Left,  and  Bottom  Margin  text  boxes. 
Or  use  the  All  Margins  text  box  to  specify  the  margin  in  all  four 
directions  at  once.  After  you  press  the  Return  key,  the  specified 
margin  will  appear  in  the  text  box,  along  with  the  selected  unit. 

4 Go  to  the  Padding  section.  The  options  in  this  section  set  the  pad- 
ding, padding-top,  padding-right,  padding-bottom,  and  padding- 
left  properties — that  is,  the  spacing  between  the  border  and  the 
content  of  any  element  formatted  with  the  current  style. 

Pick  a length  unit  or  a percentage  (recommended  for  better  seal- 
ability)  from  the  CSS 7 Units  popup  menu,  then  enter  a number  in 
any  of  the  Top,  Right,  Left,  and  Bottom  Padding  text  boxes.  Or  to 
specify  the  spacing  in  all  four  directions  at  once,  use  the  All  Pad- 
dings text  box.  After  you  press  the  Return  key,  the  specified  pad- 
ding will  appear  in  the  text  box,  along  with  the  selected  unit. 
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None 


1 Unchanged 


Right 

Both 


5 Go  to  the  Block  section.  Its  two  options  set  the  complementary 
width  and  height  properties  for  any  element  formatted  with  the 
current  style.  This  property  is  most  useful  with  referenced  ele- 
ments, such  as  images. 

Choose  a length  unit  or  a percentage  from  the  CSS1  Units  popup 
menu,  then  enter  a number  in  the  Width  or  Height  text  box  and 
leave  the  other  property  set  to  Auto  to  ensure  that  the  element  is 
scaled  proportionally.  Press  the  Return  keyand  the  specified  size 
will  appear  in  the  text  box,  along  with  the  selected  unit.  Leaving 
both  width  and  height  properties  set  to  Auto  displays  the  refer- 
enced item  in  its  original  size. 

6 Go  to  the  Float  popup  menu  and  set  the  float  property  to  create 
an  element  that  is  not  part  of  the  normal  flow  of  text.  Choose  any 
of  the  following  options: 

- Left  moves  the  element  to  the  left,  so  the  text  wraps  on  the 
right  side  of  the  element. 

- Right  move  s the  element  to  the  right,  so  the  text  wraps  on 
the  left  side  of  the  element. 

- None  causes  the  element  to  appear  where  it  occurs  in  the 
text. 

7 Go  to  the  Clear  popup  menu  and  set  the  clear  property  to  specify 
which  side  of  the  element  will  not  accept  floating  elements. 
Choose  any  of  the  following  options: 

- Left  moves  the  element  below  any  floating  element  on  the 
left  side. 

- Right  moves  the  element  below  any  floating  element  on  the 
right  side. 

- None  allows  floating  elements  on  all  sides. 
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Positioning 

Properties 


The  Positioning  Properties  tab  of  the  CSS  Selector  Inspector  lets  you 
define  the  positioning  properties  of  any  floating  element  formatted 
with  the  current  style,  including  position,  clipping  behavior,  rank  in 
the  stacking  order,  overflow  behavior,  and  visibility. 


The  Positioning  Tab  of  the 
CSS  Selector  Inspector 

Use  these  options  to  position  floating  elements. 


Use  these  options  to  control  the  clipping  behavior 
of  floating  elements. 


Use  these  options  to  control  the  stacking  order  of 
floating  elements. 

Use  these  options  to  control  the  display  properties 
of  excessive  content  in  elements. 

Use  these  options  to  control  the  visibility  of  ele- 
ments. 


• Unchanged 


Absolute 


Static 

Relative 


To  edit  the  positioning  properties  of  a style  in  the  Positioning  Proper- 
ties tab,  proceed  as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window  if  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  Positioning  Properties 
tab  rider  of  the  CSS  Selector  Inspector. 

3 Go  to  the  Positioning  section.  Its  options  set  the  positioning  prop- 
erties for  any  element  formatted  with  the  current  style.  Options 
include  Absolute,  Static,  and  Relative. 

Select  the  positioning  method  from  the  Kind  menu: 

- Choose  Absolute,  then  enter  the  coordinates  (preferably  in 
pixels)  in  the  Left  and  Top  text  boxes  to  specify  the  position  of 
the  floating  element  with  respect  to  the  upper  left  corner  of 
the  browser’s  main  display  area. 

- Choose  Static  to  let  the  element  flow  with  the  text. 

- Choose  Relative,  then  enter  the  coordinates  (preferably  in  pix- 
els) in  the  Left  and  Top  text  boxes  to  specify  the  position  of  the 
element  with  respect  to  the  parent  element. 

Enter  measurements  in  the  Width  and  Height  t text  box- 
es to  specify  the  size  of  the  element,  if  desired. 
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4 Go  to  the  Clippingsechon.  The  options  in  this  section  set  the  clip- 
ping properties  for  any  element  formatted  with  the  current  style, 
determining  where  and  how  the  element  is  visually  cropped 
when  it  overlaps  with  adjacent  elements.  Options  include/tufo 
and  Rect. 

Select  the  clipping  method  from  the  popup  menu: 

- Choose  Auto  to  let  the  browser  determine  the  clipping  prop- 
erties. 

- Choose  Rect  to  crop  the  element  to  a rectangular  box,  then 
enter  the  measurement  by  which  the  element  is  to  be 
cropped  in  the  Top,  Right,  Bottom,  and  Left  text  boxes. 

5 Go  to  the  Z- Index  text  box.  This  property  controls  the  stacking  or- 
der of  floating  elements  by  assigning  a simple  numeral  to  each 
layer.  If  two  elements  overlap,  the  one  with  the  higher  z-index 
conceals  a portion  of  the  other. 

Enter  any  whole  number  into  the  Z-Index  text  box  to  specify  the 
position  in  the  stacking  order. 

6 Go  to  the  Overflow  popup  menu  and  set  the  overflow  property  to 
determine  how  the  element  will  behave  if  its  content  outgrows 
its  specified  size.  Choose  any  of  the  following  options: 

Visible  causes  the  element  to  grow  with  its  content. 

- Scroll  adds  a vertical  or  horizontal  scrollbar  to  the  element. 

- Hidden  hides  excessive  content. 

- Auto  defaults  to  the  browser’s  preferences  for  handling  exces- 
sive content. 

7 Go  to  the  Visibility  popup  menu  and  set  the  visibility  property  to 
determine  whether  the  element  is  displayed  or  not  when  the 
browser  loads  the  page.  The  visibility  property  is  useful  as  an  ini- 
tial setting  that  scripting  will  override.  Choose  any  of  the  follow- 
ing options: 

- Inherited  assumes  the  visibility  property  of  the  parent  ele- 
ment. 

Visible  lets  you  display  the  element  when  the  browser  loads 
the  page. 

- Hidden  hides  the  element  from  view. 


Border  Properties 


361 


Border  Properties  The  Border  Properties  tab  of  the  CSS  Selector  Inspector  lets  you  set  the 

borders  of  the  “box”  (see  The  CSS1  Formatting  Model  on  page  334) 
generated  by  the  current  style,  including  line  width,  color,  and  line 
style. 


The  Border  Properties  Tab  of  the 
CSS  Selector  Inspector 


Use  these  options  to  specify  line  width,  color,  and 
line  style  for  each  physical  border. 


□ CSS  Selector  Inspector 


{ 


Use  these  options  to  specify  line  width,  color,  and 
line  style  for  all  four  borders  in  one  go. 
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To  edit  the  border  properties  of  a style  in  the  Border  Properties  tab, 

proceed  as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window'd  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  Border  Properties  tab 
rider  of  the  CSS  Selector  Inspector. 

3 The  options  in  this  tab  set  the  border , border-top,  border-right, 
border-bottom,  and  border-left  properties,  adding  a visual  border 
to  any  element  formatted  with  the  current  style. 

Choose  a length  unit  from  the  CSS 7 Units  popup  menu,  then  en- 
ter a number  in  any  of  the  Top,  Right,  Left,  and  Bottom  Border 
text  boxes,  or  use  the  All  Borders  text  box  to  add  a border  to  all 
four  edges  at  once.  After  you  press  the  Return  key,  the  specified 
border  width  will  appear  in  the  text  box,  along  with  the  selected 
unit. 

4 Go  to  the  color  field  to  the  right  of  the  text  box  and  choose  a bor- 
der color  from  the  CSS1  Colors  popup  menu  or  drag  in  a selection 
from  the  Web-Safe  Colors  tab  of  the  Color  Palette. 

5 Go  to  the  line  style  popup  menu  at  the  right  edge  of  the  tab  and 
choose  a line  style.  Options  include  Dotted,  Dashed,  Solid,  Dou- 
ble, Groove,  Ridge,  Inset,  and  Outset. 
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The  Background  Properties  tab  of  the  CSS  Selector  Inspector  enables 
you  to  set  the  background  of  the  “box”  (see  The  CSS1 
Formatting  Model  on  page  334)  generated  by  the  current  style.  Op- 
tions include  an  image  or  color. 


The  Background  Tab  of  the 
CSS  Selector  Inspector 


Use  this  option  to  reference  a background  image. 


Use  this  option  to  select  a background  color. 
Use  this  option  to  control  background  tiling. 
Use  this  option  to  set  background  image  flow. 

Use  these  options  to  specify  the  position  of  the 
image  relative  to  the  surrounding  “box”. 


□ CSS  Selector  Inspector 
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Background 
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Thischeckboxconvertsthe  path 
to  the  referenced  image  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
1 7,  Managing  Web  Sites  with 
Adobe  GoLive. 


To  edit  the  background  properties  of  a style  in  the  Background  Prop- 
erties tab,  proceed  as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window  if  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  Background  Properties 
tab  rider  of  the  CSS  Selector  Inspector. 

3 Go  to  Image  option  to  set  a background  image  for  any  element 
formatted  with  the  current  style.  When  you  set  a background  im- 
age, also  set  a background  color  that  will  be  used  when  the  im- 
age is  unavailable.  When  the  image  is  available,  it  is  overlaid  on 
top  of  the  background  color. 

Select  the  Image  checkbox  and  type  in  the  resource  locator  of  the 
image  file,  click  the  Browse  button  and  locate  the  file  in  the  sub- 
sequent file  selection  dialog,  or  use  Point  & Shoot  to  link  to  an 
image  in  the  Site  window. 

4 Go  to  the  color  field  below  and  choose  a background  color  from 
the  CSS1  Colors  popup  menu  or  drag  in  a selection  from  the  Web- 
Safe  Colors  tab  of  the  Color  Palette. 


List  Properties 


363 


Unchanged 
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5 Go  to  the  Repeat  popup  menu  if  you  want  the  image  to  tile  hori- 
zontally, vertically,  or  in  both  directions.  Use  the  Repeat  options 
as  follows: 

- Choose  Repeat  if  you  want  the  image  to  tile  both  horizontally 
and  vertically. 

- Choose  Repeat  x if  you  want  the  image  to  tile  horizontally. 

- Choose  Repeat  y if  you  want  the  image  to  tile  vertically. 

- Once  sets  this  property  to  no-repeat,  disabling  tiling. 

6 Go  to  the  Attach  popup  menu  to  set  the  background-attachment 
property.  This  property  determines  if  the  image  is  fixed  with  re- 
gard to  the  browser’s  display  area  or  if  it  scrolls  along  with  the 
content.  Use  the  Attach  options  as  follows: 

- Choose  Scroll  if  you  want  the  image  to  scroll  along. 

- Choose  Fixed  if  you  don’t  want  the  image  to  scroll  along. 

7 Go  to  the  Top  and  Left  text  boxes.  These  options  set  the  position 
of  the  image  within  the  “box”  created  by  the  current  style. 
Choose  a length  unit,  a percentage,  or  any  of  the  Left,  Center, 
Right,  or  Top,  Center,  Bottom  keyword  options  from  the  CSSi 
Units  popup  menu,  then  enter  a number  in  the  Top  and  Left  text 
boxes.  After  you  press  the  Return  key,  the  specified  position  will 
appear  in  the  text  box,  along  with  the  selected  unit. 


List  Properties  The  List  Properties  tab  of  the  CSS  Selector  Inspector  allows  you  to  set 

the  appearance  of  list  item  markers  generated  by  the  current  style. 
Options  include  list  item  marker  shapes,  a custom  image  to  serve  as 
the  marker,  and  marker  positioning. 


The  List  Tab  of  the  CSS  Selector  Inspector 


□ CSS  Selector  Inspector  @ 
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Use  these  options  to  reference  an  image  for  use 
as  a list  marker. 


Use  this  option  to  select  a default  style  for  the  list 
marker. 

Use  this  option  to  position  the  list  marker  relative 
to  the  list  text. 


Any  unsupported  properties  you  specify  appear 
in  this  list  box. 
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This  checkbox  converts  the  path 
to  the  referenced  image  to  an 
absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
17,  Managing  Web  Sites  with 
Adobe  GoLive. 


Use  these  text  boxes  to  specify  unsupported  prop- 
erties. 
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To  edit  the  list  item  marker  properties  of  a style  in  the  List  Properties 
tab,  proceed  as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window  if  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  List  Properties  tab  rider 
of  the  CSS  Selector  Inspector. 

3 Go  to  the  Image  option  to  set  the  list-style-image  property  and  use 
a custom  image  as  a list  item  marker. 

Select  the  Image  checkbox  and  type  in  the  resource  locator  for 
the  image  file,  click  the  Browse  button  and  locate  the  file  in  the 
subsequent  file  selection  dialog,  or  use  Point  & Shoot  to  link  to 
an  image  in  the  Site  window. 

4 Go  to  the  Style  popup  menu  to  set  the  list-style- type  property  and 
determine  the  appearance  of  the  list  item  marker  using  CSS1 
standard  choices.  Options  are  available  for  bullet-type  lists  {Disc, 
Circle,  Square),  numbered  lists  ( Decimal , Lower  Roman,  Upper  Ro- 
man), and  alphabetical  lists  {Lower  Alpha  and  Upper  Alpha). 

5 Go  to  the  Position  popup  menu  to  set  the  list-style-position  prop- 
erty and  determine  where  the  list  item  marker  will  appear.  Op- 
tions include: 

- Inside  sets  the  list  item  marker  flush  with  the  second,  third, 
and  following  lines  of  text. 

- Outside  adds  a first-line  indent,  letting  the  list  item  marker 
stand  out  from  the  rest  of  the  text  (like  the  dash  at  the  start 
of  this  item). 


Specifying 

Unsupported 

Properties 


To  ensure  upward  compatibility  with  future  releases  of  the  CSS  Spec- 
ification, Adobe  GoLive  lets  you  specify  still  unsupported  properties 
and  their  values.  This  occurs  in  the  List  Properties  tab  of  the 
CSS  Selector  Inspector. 

To  specify  an  unsupported  property  in  the  List  Properties  tab,  pro- 
ceed as  follows: 

1 Create  a new  style,  Class,  or  ID  in  the  Stylesheet  Window  if  you  ha- 
ven’t done  so  in  previous  steps. 

2 With  the  new  style  still  selected,  click  the  List  Properties  tab  rider 
of  the  CSS  Selector  Inspector. 

3 Go  to  the  list  box  at  the  bottom  of  the  List  tab  and  click  New. 
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4 A property-name  and  property-value  pair  appears  in  the  two  text 
boxes  below  the  list  box.  Enter  the  new  property,  tab  on  to  the 
value  text  box,  then  enter  the  desired  value  and  press  the  Return 
key  to  have  your  entry  registered. 

View  and  check  your  entry  in  the  Property  Viewer  tab  of  the 
CSS  Selector  Inspector. 


Part  19 — Cascading  Style  Sheets  Tutorial 


Cascading  StyleSheets 
Example 


CSS7  Styles  Applied  to  Text  Content 


The  following  section  provides  a step-by-step  introduction  to  the 
wealth  of  formatting  options  provided  by  Adobe  GoLive’s  implemen- 
tation of  Cascading  Style  Sheets.  The  screenshot  below  illustrates 
how  CSS1  Styles  influence  the  appearance  of  a Web  page. 


To  make  yourself  familiar  with  the  use  of  style  sheets,  we  recom- 
mend that  you  use  an  external  style  sheet  document.  Proceed  as  fol- 
lows: 

1 Choose  New  Special  from  the  File  menu,  then  Stylesheet  Docu- 
ment from  the  submenu  that  appears. 
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Creating  a Style  Sheet  Document 
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Open... 
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Close 
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Print... 
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Quit 

New  Text  Document 
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u|  New  WebObject  Source  Documc 
New  QuickTime  Movie 


Rather  than  defining  an  internal  style  sheet  for  each  and  every 
page  you  want  to  apply  some  extra  formatting  to,  it  is  easier  to 
create  a stand-alone  external  style  sheet  document.  You  can 
then  reference  this  external  style  sheet  from  any  page  to  make 
its  style  options  available. 


Adding  A New  Class  to  a StyleSheet 
Document 


2 Add  a New  Class  item  to  the  new  style  sheet  document  by  clicking 
the  New  Class  button  on  the  Stylesheet  Toolbar. 


3 Go  to  the  Basics  tab  of  the  CSS  Selector  Inspector  and  enter  a class 
name  in  the  Name  text  box-for  example,  Class'!. 
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Naming  a Class  in  a StyleSheet  Document 


New  Class 

CSS  Selector  Inspector 
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4 You  are  now  ready  to  specify  various  style  properties  using  the 
options  on  the  other  tabs  of  the  CSS  Selector  Inspector. 


The  following  example  illustrates  how  you  specify  the  desired  color, 
font  set,  font-size,  and  font-weight  (bold)  properties  in  the  Font  tab 
of  the  CSS  Selector  Inspector. 


The  CSS  Selector  Inspector 


The  Font  Tab  of  the  CSS  Selector  Inspector 


More  style  properties  are  available  on  the  Border  and  Background 
tabs. 


The  Border  and  Background  Tabs 
of  the  CSS  Selector  Inspector 
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Duplicating  a Class 


Cascading  Style  Sheets 


For  a detailed  description  of  the  other  CSS  Selector  Inspector 
tabs,  see  the  section  CSS1  Style  Property  Reference,  starting  on 
page  351. 


You  can  duplicate  the  newly  created  class  by  clicking  the  Stylesheet 
Toolbar,  then  modify  the  copy  in  the  CSS  Selector  Inspector,  thus  cre- 
ating further  variations  of  a class. 


When  you  are  done  creating  style  sheets  and  specifying  style  proper- 
ties, save  your  CSS  document  as  external.css.  Make  sure  you  save  the 
file  with  the  default  css.  filename  extension  to  ensure  that  it  is  recog- 
nized as  an  external  style  sheet. 

You  can  now  assign  the  newly  specified  styles  anywhere  throughout 
your  Web  pages.  To  do  so,  proceed  as  follows: 

1 Open  a Web  page  in  Layout  view  and  click  the  CSS  button  in  the 
upper  right  corner  of  the  document  window. 

2 Go  to  the  StyleSheet  Window  and  click  the  External  tab,  then  in- 
sert a document  placeholder  by  clicking  the  New  Item  button  on 
the  Stylesheet  Toolbar. 
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Creating  a Style  Sheet  Document 


The  CSS  Button  in  Layout  View 


The  External  Tab  of  the  Style  Sheet  Win- 
dow 
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Referencing  a Style  Sheet  via  Point 
& Shoot 


3  Now  create  a reference  to  the  previously  saved  external.css  docu- 
ment, using  one  of  Adobe  GoLive’s  link  creation  techniques,  such 
as  Point  & Shoot  shown  in  the  example  below.  (To  use  Point  & 
Shoot,  the  externa  Less  document  must  be  part  of  your  site.) 


4 In  Layout  mode,  type  a line  of  text  in  the  document  window  and 
select  any  word  by  double-clicking. 

5 Go  to  the  Style  tab  in  the  Text  Inspector  (see  next  page). 

6 Click  any  of  the  check  boxes  in  the  Inline  column.  The  selected 
text  will  be  reformatted  using  the  style  properties  of  the  respec- 
tive class. 
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Assigning  an  Inline  Style 
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For  further  information  on  the  Inline,  Par,  Div,  and  Area  col- 
umns, please  refer  to  the  section  Applying  Styles  from  Internal 
Style  Sheets  on  page  347. 


Take  some  time  to  experiment  with  the  other  styles  defined  in  pre- 
vious steps.  Be  sure  to  view  the  results  in  different  browsers  and  on 
different  platforms  because  some  style  properties  may  not  yet  be 
supported. 

Adobe  GoLive  Layout  mode  provides  a shortcut  to  previewing 
browser-specific  style  sheet  presentations.  To  simulate  the  behavior 
of  browsers  in  Layout  mode,  click  the  Layout  View  Controller  button 
(the  “eye”  button  in  the  upper  right  corner  of  the  document  win- 
dow). This  brings  up  the  Layout  View  Controller.  Choose  any  of  the 
popular  browsers  listed  in  the  Root  pop-up  menu  and  observe  how 
the  visual  presentation  changes. 
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The  Root  Popup  Menu  of  the 
Layout  View  Controller 


Please  note  that  previewing  with  the  Root  option  in  the  Layout 
View  Controller  is  not  a complete  substitute  for  previewing  the 
presentation  of  your  pages  in  the  browser. 


Adobe  GoLive’s  implementation  of  Cascading  Style  Sheets  has  much 
more  to  offer  than.  More  detailed  information  and  instructions  can 
be  found  earlier  in  this  chapter — for  example  in  the  section 
Part  76  — CSS1  Tools  in  Adobe  GoLive  (starting  on  page  337). 


Tips  and  Tricks  Here  are  two  useful  tricks  that  allow  you  to  manage  style  sheets  more 

efficiently. 

Drag  & Drop  Linking 

An  easy  way  to  link  a page  with  a style  sheet  document  within  the 
same  site  is  to  drag  the  style  sheet  file  icon  from  the  Site  Window  at 
the  small  page  symbol  above  the  main  content  area  of  the  document 
window.  After  doing  so,  all  the  styles  from  the  style  sheet  will  be 
available  for  formatting  visual  page  content. 
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Referencing  a Cascading  Stylesheet 
via  Drag  & Drop 
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Swapping  External  Style  Sheets  with  the  Link  Inspector 

If  you  have  multiple  pages  that  reference  the  same  style  sheet,  you 
may  want  to  replace  that  style  sheet  one  day.  This  is  best  achieved 
using  the  Link  Inspector,  which  lets  you  change  multiple  references 
at  the  same  time.  Here’s  how: 

1 Createa  new  style  sheet  document  and  save  it  as  partofyoursite. 

- Tipi : Adobe  GoLive’s  Save  dialog  features  a shortcut  menu 
that  lets  you  navigate  to  any  open  site  document. 

- Tip2:  By  using  the  same  style  names  as  in  the  original  style 
sheet,  you  can  reformat  your  pages  automatically. 

2 Go  to  the  Site  Window  and  select  the  .css  file  you  want  to  replace. 

3 Go  to  the  Link  Inspector  and  locate  the  icon  of  the  style  sheet  doc- 
ument you  want  to  replace.  This  icon  has  a Point  & Shoot  button 
next  to  it. 

4 Click  the  Point  & Shoot  button  and  Point  & Shoot  at  the  new  style 
sheet  document. 
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Changing  References  with  the  Link 
Inspector 
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5 In  the  Change  Reference. . . dialog  that  appears,  you  will  be 
prompted  to  confirm  this  action.  Click  OK  to  have  Adobe  GoLive 
rewrite  the  references  to  the  new  file. 

6 When  you  open  any  page  that  references  a style  sheet,  you  will 
find  that  it  contains  a completely  new  set  of  styles  now.  Better 
yet,  if  the  new  style  sheet  uses  the  same  style  names  as  the 
previous  one,  you  will  find  that  your  document  has  been 
reformatted. 
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QuickTime  Authoring 

This  chapter  introduces  you  to  Adobe  GoLive’s  Quick- 
Time™ multimedia  authoring  environment,  explaining 
the  comprehensive  set  of  tools  it  provides  for  editing  vid- 
eo, audio,  and  animation  for  the  Web. 


Adobe  Systems  has  licensed  QuickTime™  from  Apple  Computer,  Inc. 
for  use  in  CyberStudio  4.0,  which  comes  with  a robust  QuickTime™ 
editor  loaded  with  a wealth  of  video  and  audio  authoring  features. 
It  enables  multimedia  authors  to  create  movies  for  the  Web  and  edit 
them  using  many  of  the  new  features  included  in  Apple’s  Quick- 
Time™ 3.0  authoring  suite. 

Adobe  GoLive  lets  you  create  and  save  movies  as  QuickTime™  docu- 
ments as  well  as  alter  existing  and  newly-created  movies.  The  pro- 
gram allows  multimedia  authors  to  insert  insert  new  tracks  from  the 
Palette  via  drag  & drop,  including  video  tracks,  effect  tracks,  sprite 
tracks,  sound  and  music  tracks,  HREF  tracks,  chapter  tracks,  and  text 
tracks. 

Additionally,  Adobe  GoLive  supplies  multimedia  authors  with  the 
following  QuickTime™  3.0  editing  and  import  options: 

• import  (but  not  edit)  all  other  media  supported  by 
QuickTime™  3.0 

• import  a variety  of  different  audio  and  video  file  formats 

• resize  movies 

• copy  and  paste  content  from  any  supported  format  to  create  a 
new  QuickTime™  movie 

• view  images  from  a wide  variety  of  sources  including  JPEG,  BMP, 
and  PNG  formats 

• enhance  movies  with  transitions  and  filters  for  sharpening, 
color  tinting,  embossing,  and  many  more 
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Chapter  Overview 


This  chapter  contains  ten  major  sections: 

• The  QuickTime ™ Editing  Tools  section,  starting  on  page  379, 
gives  an  overview  of  Adobe  GoLive’s  tool  inventory  for  multime- 
dia authoring  with  QuickTime™. 

• Opening  and  Creating  a QuickTime™  Movie,  starting  on  page  384, 
explains  how  you  open  an  existing  movie  or  create  a new  movie 
file  from  scratch. 

• The  Saving  a QuickTime™  Movie  section,  starting  on  page  384, 
outlines  your  options  for  saving  a movie  to  disk. 

• The  Using  Video  Tracks  section,  starting  on  page  384,  explains 
how  you  insert  video  tracks  and  provide  visual  content  by 
importing  tracks  from  other  video  files. 

• Using  Effect  Tracks,  starting  on  page  388,  acquaints  you  with  the 
concept  of  effect  tracks,  which  accept  generic  effects,  filters,  and 
transitions  between  two  video  tracks. 

• The  Using  Sprite  Tracks  section,  starting  on  page  401,  instructs 
you  how  to  create  animations  from  graphics  you  import. 

• Using  Sound  and  Music  Tracks,  starting  on  page  413,  tells  you 
how  to  insert  sound  tracks  and  music  tracks  and  import  audio 
or  MIDI  files. 

• The  Using  EIREF  Tracks  section,  starting  on  page  416,  introduces 
HREF  tracks,  which  contain  URLs  the  Web  browser  can  jump  to 
during  playback. 

• The  Using  Chapter  Tracks  section,  starting  on  page  419,  spells 
out  how  you  can  use  chapter  tracks  to  subdivide  a movie  into 
navigable  sections. 

• The  last  section,  Using  Text  Tracks,  starting  on  page  423,  explains 
how  text  tracks  let  you  display  text  in  a movie,  such  as  subtitles. 
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QuickTime™ 
Editing  Tools 


The  following  section  introduces  the  QuickTime™  authoring  tools 
you  will  use  for  editing  multimedia  content,  including  the  Track  Ed- 
itor, the  QuickTime™  tab  of  the  Palette,  the  Movie  Viewer,  and  some 
of  the  Inspectors  for  the  various  media  formats  supported  by  Quick- 
Time™ 3.0. 


The  Track  Editor  Movie  editing  in  Adobe  GoLive  pivots  around  the  Track  Editor,  which 

is  a full-featured  editor  for  all  time-based  data  formats  supported  by 
QuickTime™  3.0.  Experienced  users  of  Adobe  GoLive  will  notice  that 
its  interface  has  many  of  the  same  controls  as  the  TimeLine  Editor  for 
DHTML  animation.  The  following  screenshot  shows  a sample  Track 
Editor  window  with  two  video  tracks  and  an  effect  track  with  various 
transitions. 


The  Track  Editor 

The  track  list  shows  the  tracks  in  the  current  mov- 


This  is  a standard  video  track.  Its  media  is  dis- 
played as  a bar. 

This  is  a track  with  transition  effects. 

The  bars  in  the  main  window  area  show  the  start 
and  end  times  of  an  effect. 

These  buttons  are  loop  and  palindrome  controls. 

These  buttons  are  playback  controls:  Step  Back- 
ward, Stop,  Play,  and  Step  Forward. 
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1 — The  Time  Scale  slider  controls  the  time  resolution  of 

the  display  in  the  QuickTime™  Track  Editor. 


The  main  features  of  the  editor  are  explained  below: 

The  track  list  at  left  shows  the  tracks  contained  in  the  current 
movie.  The  type  of  each  track  is  identified  by  its  name:  standard 
movie  tracks  are  named  Video  Track  7,  Video  Track 2,  etc.  Sound 
tracks  appear  as  Sound  Track  1,  Sound  Track  2,  etc. 

Depending  what  type  of  media  it  contains,  each  track  in  the  track 
list  has  either  one  or  two  controls: 

Available  for  video  effect  tracks,  sprite  tracks,  HREF  tracks,  and  chapter  tracks,  the  tri- 
angle control  expands  and  collapses  the  track.  In  expanded  view,  th e QuickTime™ 
Track  Editor  displays  the  content  of  the  track,  such  as  sprite  sub-tracks,  video  effects, 
HREFs,  and  chapters.  In  collapsed  view,  all  tracks  appear  as  bars. 

Available  for  all  tracks  with  visible  content,  the  “eye” 
symbol  hides  or  shows  the  track  in  the  Movie  Viewer 
window. 

You  select  a track  by  clicking  its  name  in  the  track  list.  Selected 
tracks  can  be  deleted  using  the  Cut  command  from  the  Edit 
menu. 
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• The  main  window  area  displays  the  media  on  each  track  as  a 
bar.  The  left  edge  of  the  bar  marks  the  start  time,  the  right  side 
the  end  time  of  the  track. 

• Arranged  below  the  track  list  is  a collection  of  controls  that  let 
you  influence  the  looping  behavior  and  control  playback: 


1_+  _ j The  Loop  button  plays  the  movie  in  a simple  endless  loop.  When  reaching  the  end  of 
U the  movie,  it  jumps  back  to  the  start  and  resumes  playing,  repeating  this  cycle  infinite- 
ly. 


With  the  Palindrome  button  clicked,  the  movie  bounces  back  and  forth  between  its 
start  and  end  points.  (The  Loop  button  must  be  clicked  to  enable  the  Palindrome  but- 
ton.) 


mEach  mouse-dick  on  the  Step  Backward  button  rewinds  the  movie  by  a single  frame 
in  Adobe  GoLive’s  Movie  Viewer  and  QuickTime™  Track  Editor  windows. 


I _ | Clicking  the  Stop  button  once  stops  movie  playback  in  Adobe  GoLive’s  Movie  Viewer 
I ^ | window.  Double-clicking  the  Stop  button  returns  the  movie  to  the  start. 


mThe  Play  button  launches  movie  playback  in  Adobe  GoLive’s  Movie  Viewer  window. 

Clicking  this  button  during  playback  pauses  the  movie.  Clicking  it  again  resumes  play- 
back. 


QD 


Each  mouse-dick  on  the  Step  Forward  button  advances  the  movie  a single  frame  in 
Adobe  GoLive’s  Movie  Viewer  and  QuickTime™  Track  Editor  windows. 


• The  slider  control  to  the  right  of  the  looping  and  playback  but- 
tons controls  the  time  resolution  of  the  film.  This  makes  it  easier 
to  examine  the  timing  relationships  of  the  various  tracks  in  mul- 
tiple track  movies.  Its  non-linear  scale  extends  from  one  frame 
(maximum  resolution)  to  one  minute  (minimum  resolution). 

Changing  the  Time  Resolution  in  the 
Track  Editor 

Moving  the  slider  to  the  right  resets  the  time  scale  . . . 

...  shortens  track  bars  ... 

. . . and  narrows  the  gap  between  keyframes  on 
sprite  tracks. 


This  text  field  shows  the  current  resolution. 
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By  dragging  the  slider  control  to  the  right,  you  can  decrease  the 
time  resolution  and  compress  the  track  bars  until  they  fit  in  the 
main  window  area.  This  allows  you  to  survey  a larger  section  of 
the  movie  or  the  entire  movie  at  a time.  The  graphic  above  shows 
the  effect  of  compressing  the  display  to  50  percent  (two  frames 
instead  of  one).  By  dragging  the  slider  control  to  the  left,  you 
maximize  time  resolution,  which  increases  the  level  of  detail 
with  which  the  tracks  are  displayed.  The  default  time  resolution 
is  6 frames  per  second.  Any  changes  you  make  are  saved  between 


sessions. 
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The  QuickTime™  Tab  of  The  QuickTime™  tab  of  the  Palette  contains  a selection  of  Quick- 

the  Palette  Time™  movie  elements,  all  ready  for  drag  & drop  insertion  into  the 

Track  Editor. 


The  QuickTime ™ Tab  of  the  Palette 


The  objects  on  the  QuickTime™  tab  let  you  add 
new  tracks  to  your  movie. 


Dragging  and  dropping  an  icon  from  the  QuickTime  tab  oi  the  Palette 
creates  a new,  empty  track.  Depending  on  the  icon  you  choose,  it  can 
be  a video,  effects,  sprite,  sound,  music,  HREF  or  chapter  track.  For 
more  detailed  information  on  how  to  use  these  icons  to  supply  con- 
tent, please  refer  to  the  sections  that  explain  how  to  use  the  individ- 
ual tracks. 


The  QuickTime™ 
Movie  Viewer 


Adobe  GoFive  comes  with  a built-in  Movie  Viewer  for  QuickTime™ 
movies.  As  a companion  real-time  viewing  tool  to  the  Track  Editor,  it 
displays  any  movie  you  load  or  create  in  a dedicated  window.  Any  ed- 
its you  make  in  the  Track  Editor  appear  instantly  in  the  main  display 
area  of  the  Movie  Viewer. 


The  QuickTime™  Movie  Viewer 


Clicking  this  button  opens  the  Track  Editor  for  the 
current  movie. 


Any  movie  you  load  appears  in  the  main  display 


□ = Rock  Climbing .mou  PI  S 


f Default  t |- 


The  Change  Window  Size 
menu  provides  options 
for  resizing  the  Movie 
Viewer  window. 


The  Movie  Viewer  window  has  two  controls: 


The  size  menu  shown  to  the  left  lets  you  resize  the  Movie  Viewer 
window.  The  Default  option  restores  the  window  to  the  original 
size  of  the  movie  document. 
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The  QuickTime™ 
Inspector 


The  Basic  Tab  of  the  QuickTime ™ 
Inspector 

Click  this  tab  to  view  general  information  on  the 
movie. 


The  Annotation  Tab  of  the  QuickTime ™ 
Inspector 

Ciick  this  tab  to  add  annotations  to  the  movie. 


• The  Open  Track  Editor  button  n opens  the  Track  Editor  for  the 
movie  currently  displayed  in  the  Movie  Viewer  window. 


The  QuickTime™  Inspector  appears  whenever  you  open  or  create  a 
movie  in  Adobe  GoLive  using  the  Open  and  New  commands  from  the 
File  menu.  It  disappears  when  you  open  the  QuickTime™  Track  Editor 
and  click  to  select  a track.  You  can  restore  it  at  any  time  by  clicking 
the  movie  in  the  Adobe  GoLive  Movie  Viewer. 

The  QuickTime™  Inspector  has  two  tabs,  Basic  and  Annotation: 

• The  Basic  tab  provides  technical  information  on  the  movie, 
including  the  number  of  tracks  it  contains,  its  duration,  the  size 
of  the  movie  file  in  bytes,  the  data  rate  available  per  second  dur- 
ing playback,  as  well  as  the  physical  dimensions  of  the  movie. 


• the  Annotation  tab  lets  you  make  annotations  on  a wide  variety 
of  aspects  of  the  movie  and  save  them  with  the  movie  file. 


QuickTime™  Editing  Tools 


383 


The  pulldown  menu  at  the  top  of  the  Inspector  window  offers  anno- 
tation options  from  the  following  categories:  Artist,  Author,  Com- 
ment, Copyright,  Creation  Date,  Description,  Director,  Disclaimer,  Full 
Name,  Ftost  Computer,  Information,  Make  Model,  Original  Format, 
Original  Source,  Performers,  Producer,  Product,  Software,  Special  Play- 
back Requirements,  Warning,  Writer,  and  Edit  Date.  This  provides  a 
convenient  way  to  pass  information  to  other  people  co-authoring 
the  movie. 

To  add  or  edit  annotations,  proceed  as  follows: 

1 Select  a category  from  the  popup  menu  at  the  top  of  the  Inspector 
window — for  example,  Comment. 

2 Place  the  cursor  in  the  text  box  and  enter  or  edit  a comment. 

3 Click  the  Add  button  at  the  bottom  of  the  window  to  have  Adobe 
GoLive  add  the  annotation  to  the  movie  file,  or  click  Replace  if 
you  have  made  changes  to  existing  annotation  text. 


The  Delete  button  removes  all  the  existing  text  for  the  selected  cate- 
gory. 


Other  Inspectors  for  There  are  eight  more  Inspectors  that  assist  you  in  editing  QuickTime™ 

QuickTime™  Movies  movies,  one  for  each  type  of  track: 

• The  Video  Track  Inspector  lets  you  rename,  position,  and  resize 
standard  video  tracks. 

• The  Video  Effect  Track  Inspector  is  the  tool  for  inserting  transi- 
tions or  other  visual  effects. 

• The  Sprite  Track  Inspector  lets  you  create  tracks  with  sprites  (ani- 
mated graphics),  edit  sprite  animations,  and  wire  the  sprites 
with  actions. 

• The  Sound  Track  Inspector  allows  you  to  rename  sound  tracks. 

• The  Music  Track  Inspector  allows  you  to  rename  music  tracks. 

• The  HREF  Track  Inspector  lets  you  edit  Web  addresses  on  HREF 
tracks  in  the  movie. 

• The  Chapter  Track  Inspector  lets  you  edit  a chapter  track  in  a 
movie. 

• The  Text  Track  Inspector  lets  you  edit  a text  track  in  a movie. 

These  Inspectors  are  explained  in  detail  in  the  following  sections, 

along  with  the  tracks  they  allow  you  to  edit. 
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Opening  and  Creating 
a QuickTime™  Movie 


Saving  a 

QuickTime™  Movie 


Placinga  QuickTime™ 
Movie  on  Your  Page 

Using  Video  Tracks 


Opening  and  creating  a QuickTime™  movie  in  Adobe  GoLive  is 
straightforward  and  easy: 

• You  open  an  existing  movie  by  choosing  the  Open  command 
from  the  File  menu.  This  brings  up  the  movie  in  Adobe  GoLive’s 
Movie  Viewer  window  (see  page  381). 

• You  create  a new  movie  by  choosing  the  New  Special  command 
from  the  File  menu,  followed  by  the  New  QuickTime™  Movie 
option  from  the  submenu  that  appears.  After  prompting  you  to 
save  the  movie,  Adobe  GoLive  opens  an  empty  Movie  Viewer 
window. 


When  you  save  a QuickTime™  movie  in  Adobe  GoLive  using  the  Serve 
command  from  the  File  menu,  a dialog  appears,  prompting  you  to 
choose  between  two  options,  Flatten  and  Fast  Save: 

• Flatten  saves  the  movie  as  a self-contained  document,  resolving 
all  data  references  to  other  movies  you  may  have  imported 
media  from.  This  option  compresses  the  movie  and  should  only 
be  used  when  saving  the  movie  for  final  publication  on  the  Web. 

• Fast  Save  saves  your  changes  immediately  without  resolving 
data  references  or  applying  maximum  compression.  Use  this 
option  to  save  the  movie  while  you  are  working  on  it. 

Please  note  that  Flatten  involves  intensive  file  size  optimization 
operations  and  may  take  some  time  to  accomplish. 


To  place  a QuickTime™  movie  on  your  page,  you  need  to  insert  a 
Plugin  item  from  the  Basic  tab  of  the  Palette.  This  is  described  in  the 
Plugins  section,  starting  on  page  202  in  Chapter  4. 


A video  track  in  a QuickTime™  movie  is  a standard  structure  for  hold- 
ing visual  data,  such  as  digitized  video.  It  consists  of  a number  of  se- 
quential pixel  images  that  play  back  at  a certain  speed  (referred  to  as 
the  frame  rate,  expressed  in  frames  per  second)  to  give  the  viewer 
the  visual  impression  of  motion. 
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Inserting  a Video  Track 
and  Importing  Media 

SI 


s 

§ 

The  Movie  File  Selection  Dialog  Box 


A preview  of  the  first  frame  appears  here. 


The  following  section  provides  step-by-step  instructions  for  inserting 
a video  track  and  adding  media. 

To  insert  a video  track  in  the  Track  Editor  and  add  media  to  it,  pro- 
ceed as  follows: 

1 Open  or  create  a movie,  as  explained  in  the  preceding  section 
Opening  and  Creating  a QuickTime ™ Movie. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

3 Now,  CyberStudio  provides  two  options,  depending  on  whether 
you  want  to  import  the  first  visual  track  of  a movie,  or  a subse- 
quent track. 


Importing  the  First  Visible  Track  of  a Movie 


To  import  the  first  visible  track  of  a movie,  proceed  as  follows: 

1 Drag  the  Video  Track  item  (shown  at  left)  from  the  QuickTime ™ 
tab  of  the  Palette  onto  the  main  window  area  of  the  Track  Editor. 


2 This  opens  a file  selection  dialog  box  that  lets  you  select  a movie 
from  your  hard  disk  or  any  other  mounted  volume. 


Preuieui 


Create 


| C8  QuickTime  ? | □ My  LUorksp... 

1 Eject 

| Desktop  | 


Cancel 

Open 


Q ComfyChair.mou 
JQl  dolphin. mou 
n qturpool.mou 
fli  SharpTurn.mou 
JQ  StopSign.mou 
Q ZipDriue'“.mou 


0 Shorn  Preuieuj 


3 Select  a movie  and  click  Open.  Adobe  GoLive  imports  the  first  vis- 
ible track  of  the  movie  now.  If  the  author  has  named  the  track  in 
the  source  movie,  its  name  appears  in  the  track  list.  If  the  track 
is  unnamed,  it  is  inserted  as  Video  Track  1,  Video  Track 2,  and  so 
on. 

4 Go  to  the  context-sensitive  Inspector  (see  the  section  Inspecting  a 
Video  Track  further  below),  now  titled  Video  Track  Inspector  and 
enter  a name  for  the  new  track  in  the  text  box  next  to  the  Video 
Track  icon,  if  required. 
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Copying  a Selected  Track  from  Another  Movie 


To  copy  a selected  track  from  another  movie,  proceed  as  follows: 

1 Choose  Open  from  Adobe  GoLive’s  File  menu  to  open  the  source 
movie,  that  is,  the  movie  that  contains  the  desired  track. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor  for  the  source  movie 
you  want  to  copy  a track  from. 

3 Click  to  select  the  desired  track  from  the  track  list  to  the  left. 
(You  can  only  pick  one  track  at  a time  from  the  source  movie.) 

4 Choose  Copy  from  the  Edit  menu. 

5 Retu  rn  to  the  target  movie,  that  is,  the  movie  you  want  to  add  the 
track  to. 

6 Choose  Paste  from  the  Edit  menu.  The  new  track  appears  in  the 
Track  Editor  window  of  the  target  movie. 

7 Go  to  the  context-sensitive  Inspector,  now  titled  Video  Track  In- 
spector and  enter  a name  for  the  new  track  in  the  text  box  next 
to  the  Video  Track  icon,  if  required. 

8 You  are  now  ready  to  add  additional  tracks  for  sprites,  Quick- 
Time™ video  effects,  sound,  and  other  media.  This  is  explained 
in  the  following  sections. 


Inspecting  a Video  Track 


The  Video  Track  Inspector  also  allows  you  to  inspect  and  edit  several 
basic  properties  of  the  track,  as  explained  below. 


The  Video  Track  Inspector 


Left 

Vidth 


Use  this  text  box  to  name  the  video  track. 

Use  these  text  boxes  to  position  the  video  track. 

Use  these  text  boxes  to  resize  the  video  track. 

Use  this  checkbox  to  control  resizing  behavior. 

Use  this  text  box  to  control  the  layering  of  thevideo  — -Layer  IT" 
track. 


These  text  boxes  display  general  properties. 


Video  Track  Inspector 


j [vide 


| Top  |0 
| Height  | 76 


"" 0 Constrain  Proportions 


Graphics  Mode  | Dither  Copy 


Start  Time 
Duration 
Track  Type 
Data  Size 
Data  Rate 
Colors 
Data  Format 


00 :00 :00.00 


00 :00 :30.09 


Millions  Colors 


Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  HREF  track 
overlays  on  other  tracks  within  the  movie. 


The  color  field  lets  you  pick  a color  from 
the  Color  Palette  for  use  with  the  Blend 
and  Transparent  graphics  modes  (see 
page  408). 


Using  Video  Tracks 


387 


The  Video  Track  Inspector  lets  you  edit  the  following  properties: 

- Left  and  Top:  Use  these  text  boxes  to  position  the  track. 

Width  and  Height:  Use  these  text  boxes  to  set  the  vertical  and 
horizontal  dimensions  of  the  movie  box  as  it  appears  in  the 
Web  page.  The  actual  size  of  the  movie  is  determined  by  the 
track  with  the  highest  width  and  height  settings. 

- Constrain  Proportions:  By  activating  this  checkbox,  you  force 
the  movie  to  resize  proportionally.  For  example,  when  you 
edit  the  value  in  the  Width  text  box,  Adobe  GoLive  adjusts  the 
Height  setting  automatically  to  maintain  the  original  height- 
to-width  ratio  of  the  track. 

- Layer:  Use  this  text  box  to  specify  the  layering  of  the  video 
track  within  the  movie.  The  lower  the  layer  number  you  en- 
ter, the  farther  to  the  front  the  video  appears. 

- Graphics  Mode:  Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  video  track  overlays  on  other 
tracks  within  the  movie.  For  a brief  description  of  the  graph- 
ics mode  options,  please  refer  to  page  408. 

The  other  fields  are  not  user-editable.  They  are  updated  automati- 
cally as  you  edit  the  track. 

- Start  Time:  The  start  time  of  the  track,  which  is  usually  “time 
zero”.  You  can  change  the  start  time  of  a track  by  clicking  its 
bar  in  the  Track  Editor  and  dragging  it  in  the  desired  direc- 
tion. 

- Duration:  The  duration  of  the  track.  This  property  is  not  edit- 
able for  video  tracks. 

Track  Type:  This  text  field  shows  the  track  type.  You  can’t 
change  the  track  type,  but  you  can  delete  a track  you  don’t 
want  and  insert  a new  track  of  the  proper  type. 

- Data  Size:  This  indicates  the  type  of  compressor  used. 

- Data  Rate:  This  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 

- Colors:  This  text  field  shows  the  color  depth  of  the  movie — 
for  example,  Thousands  or  Millions  of  colors. 

- Data  Format:  The  compressor  used  on  the  video  content. 
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The  Gradient  Wipe  Effect  in  the  Movie 
Viewer  Window 


QuickTime™  video  effects  have  been  around  since  the  3.1  release, 
but  Adobe  GoLive  4.0  with  its  Track  Editor  now  provides  a more  intu- 
itive interface  for  applying  those  effects  to  movies. 

The  Track  Editor  lets  you  use  multiple  effects  in  a movie  and  specify 
exactly  when  they  should  start.  Its  ability  to  handle  multiple  tracks 
also  enables  multimedia  authors  to  use  transitions  in  their  movies. 
The  following  illustration  shows  the  Gradient  Wipe  Effect  effect  ap- 
plied to  a movie  with  two  video  tracks. 


Gradient  Wipe  starting  up 


Gradient  Wipe  fading  in  the 
new  video  track 


Gradient  Wipe  fading  out  the 
initial  video  track 


Effects  and  transitions  have  their  own  track  in  the  Track  Editor,  re- 
ferred to  as  effect  tracks  or  filter  tracks.  Each  effect  persists  until  a 
new  effect  follows  on  the  effect  track.  If  you  use  multiple  effects  on 
a track,  they  share  the  time  given  by  the  maximum  duration  of  the 
video  tracks  they  manipulate.  There  are  three  basic  types  of  effects: 

• There  are  three  generic  effects,  two  of  which  need  no  source 
track  for  video  data:  Fire  and  Cloud.  The  third  effect,  Ripple,  is 
applied  to  any  combination  of  visible  tracks  below  it. 

• Single-source  effects,  also  referred  to  as  “filters”,  are  applied  to  a 
single  track  only  and  change  its  visual  presentation.  Examples 
include  Blur,  Color  Tint,  Edge  Detection,  and  Emboss. 

• Dual-source  effects,  or  transitions,  fade  out  one  track  and  fade 
in  another.  Examples  include  Cross  Fade,  Explode,  Implode,  and 
Gradient  Wipe. 

The  following  section  explains  how  you  use  an  effect  on  a movie,  us- 
ing one  example  for  each  type  of  effect.  In  each  section  you  will  find 
a reference  with  brief  descriptions  of  the  QuickTime™  video  effects 
available  in  Adobe  GoLive. 
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Inserting  an 
Effect  Track 


To  insert  an  effect  track,  proceed  as  follows: 

1 Open  or  create  a movie,  as  explained  in  the  section  Opening  and 
Creating  a QuickTime ™ Movie  on  page  384. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

3 Drag  the  Filter  Track  item  (shown  at  left)  from  the  QuickTime™ 
tab  of  the  Palette  onto  the  main  window  area  of  the  Track  Editor. 

4 This  inserts  a new  effect  track,  which  is  still  empty.  The  new  track 
is  named  something  like  Effect  Track  T At  the  same  time,  the 
context-sensitive  Inspector  window  turns  into  the  Video  Effect 
Track  Inspector. 

5 Go  to  the  Basic  tab  of  the  Video  Effect  Track  Inspector  (see  below), 
place  the  cursor  in  the  text  box  next  to  the  Video  Effect  Track  icon, 
then  enter  a name  for  the  new  track. 


The  Basic  Tab  of  the  Video  Effect  Track 
Inspector 

Click  this  tab  to  set  general  properties  of  the  filter 
track. 

Use  this  text  box  to  name  the  filter  track. 

Use  these  text  boxes  to  position  the  filter  track. 
Use  these  text  boxes  to  resize  the  effect  track. 

Use  this  checkbox  to  control  resizing  behavior. 

Use  this  text  box  to  control  the  layeri  ng  of  the  filter 
track. 


These  text  boxes  display  general  track  properties. 


Choose  an  option  from  the  Graphics 
Mode  popup  menu  to  specify  how 
the  HREF  track  overlays  on  other 
tracks  within  the  movie. 

The  color  field  lets  you  pick  a color 
from  the  Color  Palette  for  use  with 
the  Blend  and  Transparent  graphics 
modes  (see  page  408). 


The  Video  Effect  Track  Inspector  lets  you  edit  the  following  properties: 

- Left  and  Top:  Use  these  text  boxes  to  position  the  track. 

Width  and  Height:  Use  these  text  boxes  to  set  the  vertical  and 
horizontal  dimensions  of  the  movie  playback  box  in  the  Web 
page.  The  actual  size  is  determined  by  the  track  with  the 
highest  width  and  height  settings. 

- Constrain  Proportions:  By  activating  this  checkbox,  you  force 
the  movie  to  resize  proportionally.  For  example,  when  you 
edit  the  value  in  the  Width  text  box,  Adobe  GoLive  adjusts  the 
Height  setting  automatically  to  maintain  the  original  height- 
to-width  ratio  of  the  track. 
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- Layer:  Use  this  text  box  to  specify  the  layering  of  the  effect 
track  within  the  movie.  The  lower  the  layer  number  you  en- 
ter, the  farther  to  the  front  the  effect  appears. 

- Graphics  Mode:  Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  effect  track  overlays  on  other 
tracks  within  the  movie.  For  a brief  description  of  the  graph- 
ics mode  options,  please  refer  to  page  408. 

The  other  fields  are  not  user-editable.  They  are  updated  as  you  edit 
the  track. 

- Start  Time:  The  start  time  of  the  track,  which  is  usually  “time 
zero”.  You  change  the  start  time  of  a track  by  clicking  its  bar 
in  the  Track  Editor  and  dragging  it  in  the  desired  direction. 

- Duration:  The  duration  of  the  track.  You  edit  this  property  by 
inserting  additional  effects  tracks. 

Track  Type:  This  text  field  shows  the  track  type,  Video.  An  ef- 
fect track  is  a variant  of  a video  track. 

- Data  Size:  This  text  field  displays  the  data  size  in  bytes. 

- Data  Rate:  This  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 

6 You  now  have  three  options,  depending  on  what  kind  of  effect 

you  want  to  apply  to  your  movie: 

- To  apply  a generic  effect,  follow  the  instructions  in  the  next 
section. 

- To  apply  a single-source  effect  to  a track,  follow  the  instruc- 
tions in  the  section  Applying  a Single-Source  Video  Effect  on 
page  392. 

- To  use  a dual-source  effect  with  two  tracks,  go  to  the  section 
Applying  a Dual-Source  Effect  on  page  394. 


Applying  a Generic  Video 
Effect 


This  section  explains  how  to  use  any  of  the  three  generic  QuickTime™ 
video  effects. 

To  apply  one  of  the  three  generic  video  effects,  proceed  as  follows: 

1 Make  sure  you  have  the  following  tracks  in  your  movie: 

For  Cloud:  One  effect  track  only.  Anything  below  that  track  is 
invisible. 

For  Fire:  Same  as  Cloud. 

For  Ripple:  Any  number  of  tracks,  with  an  effect  track  on  top. 
This  effect  is  applied  to  any  combination  of  tracks  below  it. 
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The  Select  Effect. . . Dialog  Box  with  the 
Fire  Effect  Selected 

Choose  an  effect  from  this  list. 


Each  effect  displays  a typical  set  of  controls. 


This  preview  pane  gives  you  an  impression  of 
what  the  effect  does. 


2 Click  the  small  triangle  control  next  to  the  track  name  in  the 
Track  Editor  to  expand  the  newly  inserted  effect  track. 

3 With  the  effect  track  selected  i n the  Track  Editor,  go  to  the  Effects 
tab  of  the  Video  Effect  Track  Inspector  and  click  the  Generic  radio 
button. 

4 Click  the  New  button  to  insert  a new  effect. 

5 This  brings  up  the  Select  Effect. . . dialog  box  shown  below. 


6 Choose  an  effect  from  the  list,  for  example  Fire. 

7 Choosing  an  effect  displays  its  typical  controls,  like  the  Spread 
rate,  Sputter  rate,  Water  rate,  and  Restart  rate  slider  controls 
shown  in  the  example  above.  The  preview  pane  in  the  lower  left 
corner  of  the  dialog  box  shows  what  the  effect  will  look  like. 

8 Click  OK  to  have  Adobe  GoLive  apply  the  effect  to  the  movie,  then 
click  the  Play  button  [7]  in  the  Track  Editor  to  view  the  effect. 

9 The  first  effect  is  as  long  as  the  movie  itself.  (If  there  is  no  other 
media  in  the  movie,  then  the  duration  defaults  to  one  second.) 
Click  the  effect  in  the  Track  Editor  and  set  its  duration  using  the 
up  and  down  arrows  next  to  the  Duration  option,  if  desired. 

10  To  insert  an  additional  effect,  return  to  the  Effects  tab  of  the  Vid- 
eo Effect  Track  Inspector  and  position  the  time  cursor  by  clicking 
the  up  and  down  arrows  next  to  the  Start  option. 

1 1 Click  the  New  button  to  i nsert  a new  segment  on  the  effects  track, 
then  choose  an  effect  as  outlined  above. 
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Applying  a Single-Source  The  following  section  instructs  you  how  to  a apply  single-source  ef- 

Video  Effect  feet  or  filter  to  a single  track  only  in  order  to  change  its  visual  presen- 

tation. 


To  apply  a single-source  QuickTime™  video  effect,  proceed  as  fol- 
lows: 

1 Make  sure  you  have  one  video  track  and  an  empty  effect  track  in 
your  movie.  (If  you  have  two  tracks,  the  top  track  in  the  Track  Ed- 
itor will  be  invisible.) 

2 Click  the  small  triangle  control  next  to  the  track  name  in  the 
Track  Editor  to  expand  the  newly  inserted  effect  track. 

3 Select  the  effect  track,  go  to  the  Effect  tab  of  the  Video  Effect  Track 
Inspector  (see  below)  and  click  the  Filter  radio  button. 

4 Choose  a track  from  the  Source  A popup  menu. 


The  Effect  Tab  of  the  Video  Effect  Track 
Inspector 


Choose  a track  from  this  popup  menu. 


Video  Effect  Track  Inspector 


Basic  f Effect  | 


Q Generic 
#>  Filter 

O Transition 

Source  A 


I Video  Track  1 i~) 


| ( Delete  ] |jE< 

Start  | OOfOOIOO.OO 

Duration 


r 1 

1 00:00:01 .00 1^| 


5 Click  the  New  button  to  insert  a new  effect. 

6 This  brings  up  the  Select  Effect...  dialog  box  shown  below. 
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The  Select  Effect. . . Dialog  Box 


Choose  an  effect  from  this  list. 


Each  effect  displays  a typical  set  of  controls. 


This  preview  pane  gives  you  an  impression  of 
what  the  effect  does. 


7 Choose  an  effect  from  the  list,  for  example  Blur.  A complete  list 
of  all  effects  available  in  Adobe  GoLive  appears  in  the  section  Vid- 
eo Effects  Available  in  Adobe  GoLive,  starting  on  page  395. 

8 Choosing  an  effect  displays  its  typical  controls,  like  the  Amount  of 
blurring  popup  menu  and  Brightness  slider  controls  shown  in  the 
example  above.  The  preview  pane  in  the  lower  left  corner  of  the 
dialog  box  gives  you  an  impression  of  what  the  effect  and  the  set- 
tings you  make  will  look  like  when  applied  to  the  movie. 

9 Click  OK  to  have  Adobe  GoLive  apply  the  effect  to  the  movie. 

10  The  first  effect  is  as  long  as  the  movie  itself.  Click  the  effect  in  the 
Track  Editor  and  set  its  duration  using  the  up  and  down  arrows 
next  to  the  Duration  option  in  the  Effects  tab  of  the  Video  Effect 
Track  Inspector,  if  desired. 

11  Click  the  Play  button  [TJ  in  the  Track  Editor  to  view  the  effect. 

12  If  you  are  not  satisfied  with  the  result,  click  the  bar  on  the  effect 
track  to  select  the  new  effect,  then  return  to  the  Effects  tab  of  the 
Video  Effect  Track  Inspector.  Click  Edit. . . to  display  the  Select  Ef- 
fect. . . dialog  box  and  select  another  effect  or  change  the  settings. 

13  To  add  an  additional  effect  to  the  track,  position  the  time  cursor 
by  clicking  the  up  and  down  arrows  next  to  the  Start  option  in  the 
Effect  tab. 

14  Click  the  New  button  again,  then  select  and  set  up  the  new  effect 
as  outlined  above. 
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Applying  a 
Dual-Source  Effect 


This  section  teaches  you  how  to  use  a dual-source  effect,  or  transi- 
tion, that  fades  out  one  track  and  fades  in  another. 

To  apply  a QuickTime™  transition  effect,  proceed  as  follows: 

1 Make  sure  you  have  two  video  tracks  and  one  empty  effect  track 
in  your  movie.  (If  you  have  more  than  two  tracks,  the  top  track  in 
the  Track  Editor  will  be  invisible.)  In  the  Track  Editor,  the  two  vid- 
eo tracks  should  be  at  the  top  now,  and  the  effect  track  at  the 
bottom. 

2 Click  the  small  triangle  control  next  to  the  track  name  in  the 
Track  Editor  to  expand  the  newly  inserted  effect  track. 

3 Select  the  effect  track,  go  to  the  Effect  tab  of  the  Video  Effect  Track 
Inspector  (see  screenshot  on  page  392)  and  click  the  Transition  ra- 
dio button. 

4 Choose  one  track  each  from  the  Source  A and  Source  B popup 
menus. 

5 Click  the  New  button  to  insert  the  new  effect. 

6 This  brings  up  the  Select  Effect...  dialog  box  shown  in  the  preced- 
ing section. 

7 Select  a transition  effect  from  the  list,  for  example  Wipe  Gradient, 
and  edit  additional  options,  if  desired.  A complete  list  of  all  ef- 
fects available  in  Adobe  GoLive  appears  after  this  section. 

8 Click  OK  to  have  Adobe  GoLive  apply  the  effect  to  the  movie. 

9 The  first  effect  is  as  long  as  the  movie  itself.  Click  the  effect  in  the 
Track  Editor  and  set  its  duration  using  the  up  and  down  arrows 
next  to  the  Duration  option  in  the  Effects  tab  of  the  Video  Effect 
Track  Inspector,  if  desired. 

10  Click  the  Play  button  [7]  in  the  Track  Editor  to  view  the  effect. 
You  should  see  the  fading  effects  shown  on  page  388. 

11  If  you  are  not  satisfied  with  the  result,  click  the  bar  on  the  effect 
track  to  select  the  new  effect,  then  return  to  the  Effects  tab  of  the 
Video  Effect  Track  Inspector.  Click  Edit. . . to  display  the  Select  Ef- 
fect. . . dialog  box  and  select  another  effect  or  change  the  settings. 

12  To  add  an  additional  effect  to  the  track,  position  the  time  cursor 
by  clicking  the  up  and  down  arrows  next  to  the  Start  option  in  the 
Effect  tab. 

13  Click  the  New  button  again,  then  select  and  set  up  the  new  effect 
as  outlined  above. 
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Video  Effects  Available  in 
Adobe  GoLive 


Adobe  GoLive  comes  with  the  following  QuickTime™  video  effects 
and  transitions  built  in: 

Single-Source  Effects 

Alpha  Gain:  The  alpha  gain  filter  manipulates  the  alpha  channel  of 
a single  track.  This  operation  is  commonly  applied  before  passing 
the  track  to  the  Alpha  Compositor  effect  described  on  page  399.  The 
Alpha  Gain  effect  has  four  parameters: 

• Gain:  This  value  is  multiplied  by  the  original  alpha  channel 
value. 

• Offset:  This  value  is  added  to  the  old  alpha  channel,  after  it  has 
been  multiplied  by  the  gain  parameter. 

• Top  pin:  The  maximum  value  that  the  alpha  channel  can  take 
after  the  gain  and  offset  parameters  have  been  applied. 

• Bottom  pin:  The  minimum  value  that  the  alpha  channel  can 
take  after  the  gain  and  offset  parameters  have  been  applied. 

Blur:  This  effect  applies  a convolution  blur  effect  to  a single  track. 
The  Blur  effect  has  two  parameters: 

• Amount  of  blurring:  This  popup  menu  provides  a choice  of  val- 
ues, from  7 - least  to  7 - most.  The  larger  the  value,  the  longer 
the  effect  will  take  to  run  and  the  greater  the  degree  of  blurring. 

• Brightness:  The  default  value  of  1.0  blurs  the  source  track  but 
doesn’t  change  its  brightness.  Values  between  0.0  and  1.0 
decrease  brightness,  values  greater  than  1 .0  increase  brightness. 

Color  Style:  This  effect  allows  you  to  apply  two  color  change  effects 
to  a single  track.  Both  effects  process  the  red,  green,  and  blue  com- 
ponents of  each  pixel  independently.  The  color  style  effect  offers  two 
options: 

The  first  option,  Solarization,  adjusts  the  color  balance  of  the  source 
track  by  generating  a table  of  replacement  color  values  from  two  pa- 
rameters. The  table  starts  at  zero  intensity  and  increases  to  the  max- 
imum intensity  at  the  peak  point.  After  that  it  falls  backtozero.  It  has 
two  controls: 

• Solarize  Amount:  This  slider  control  adjusts  the  maximum  inten- 
sity of  the  solarization  table. 

• Solarize  Point:  This  slider  control  adjusts  the  peak  point  of  the 
solarization  table. 
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The  second  effect,  Posterization,  produces  a “color  banding”  effect.  It 
reduces  the  number  of  colors  in  an  image  by  replacing  all  pixels 
whose  color  is  in  a consecutive  range  with  the  middle  color  from  that 
range.  It  has  a single  slider  control: 

• Posterize  amount:  The  number  of  colors  that  are  grouped  and 
replaced  with  the  mid-range  color. 

Color  Tint:  This  filter  converts  the  track  to  greyscale,  then  applies  a 
light  and  a dark  color  to  the  image.  The  light  color  replaces  the  white 
in  the  greyscale  image,  and  the  dark  color  replaces  the  black.  The 
end  result  is  a tinted  duochrome  version  of  the  source  image. 

This  filter  has  four  controls. 

• Tint  Type:  This  popup  menu  lets  you  select  from  a choice  of  four 
different  tints,  including  Black  and  White,  X-Ray,  Sepia,  and 
Cobalt. 

• Light  color:  This  color  replaces  the  white  of  the  greyscale  image. 

• Dark  color:  This  color  replaces  the  black  of  the  greyscale  image. 

• Brightness:  Adjusts  the  brightness  of  the  source  between  -255  (all 
colors  are  replaced  with  black)  and  255  (all  colors  are  replaced 
with  white).  A value  of  0 will  leave  the  brightness  unchanged. 

• Contrast:  Adjusts  the  contrast  of  the  source  between  -255  (mini- 
mum contrast)  and  255  (maximum  contrast).  A value  of  0 will 
leave  the  contrast  unchanged. 

ColorSync:  This  effect  adjusts  the  color  balance  of  an  image  to  match 
a specified  color  sync  profile.  Typically,  you  would  use  this  to  adjust 
the  color  profile  of  an  image  to  match  the  current  display  device. 
This  allows  you  to  maintain  accurate  color  representations  across  de- 
vices. You  specify  both  the  color  sync  profile  of  the  source  image  and 
the  color  sync  profile  of  the  destination  device  the  image  will  be  dis- 
played on.  The  color  sync  filter  has  two  parameters: 

• Source  profile:  The  color  sync  profile  of  the  source  image. 

• Destination  profile:  The  color  sync  profile  of  the  target  device. 

Edge  Detection:  This  effect  applies  an  edge  detection  convolution  to 
a single  track.  The  performance  of  the  edge  detection  is  determined 
by  the  convolution  kernel.  This  is  a matrix  of  values  applied  to  each 
pixel  of  the  source  to  produce  the  resulting  image.  This  effect  has  two 
parameters: 

• Edge  thickness:  This  popup  menu  gives  you  a choice  of  seven  val- 
ues, from  7 - least  to  7 - most.  The  larger  the  value,  the  thicker 
the  edges  in  the  resulting  image. 
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• Colorize  Result:  If  this  checkbox  is  enabled,  the  edges  produced 
are  colorized,  based  on  the  color  of  the  source  pixels  around 
them.  Otherwise,  edges  are  rendered  as  light  grey  against  a dark 
grey  background. 

Emboss:  This  effect  applies  an  emboss  convolution  to  a single  track. 
This  effect  has  one  parameter  only: 

• Amount  of  Embossing:  This  popup  menu  gives  you  a choice  of 
seven  values,  from  7 - least  to  7-  most.  The  higher  the  value,  the 
heavier  the  embossing  effect. 

Film  Noise:  This  effect  simulates  effects  that  are  seen  on  aged  film 
stock.  It  can  be  used  to  make  a video  source  appear  as  if  it  has  suf- 
fered the  effects  of  age  and  wear.  The  film  noise  effect  offers  two  op- 
tions on  a popup  menu: 

• Hairs  and  Scratches : These  effects  display  as  hairs  lying  on  the 
surface  of  the  film  and  vertical  or  near-vertical  one-pixel  lines 
that  simulate  scratches.  Five  parameters  can  be  adjusted  to  con- 
trol the  visual  impression: 

- Hair  density:  This  parameter  controls  the  number  of  hairs 
that  are  drawn  on  each  frame  and  the  frequency  with  which 
they  appear. 

- Hair  length:  The  maximum  length  (in  pixels)  of  the  hairs  be- 
ing drawn. 

- Scratch  density:  This  parameter  controls  the  number  of 
scratches  that  are  drawn  on  each  frame  and  the  frequency 
with  which  they  appear. 

- Scratch  duration:  The  maximum  number  of  frames  that  each 
scratch  appears  for. 

- Scratch  width:  The  maximum  width,  in  pixels,  of  a scratch. 

• Dust  and  Film  Fading:  These  effects  simulate  dust  particles  on 
the  surface  of  the  film,  combined  with  an  overall  change  in  the 
color  of  the  film  stock.  Two  parameters  let  you  modify  the 
appearance  of  this  effect: 

- Dust  density:  This  parameter  controls  the  number  of  dust  par- 
ticles that  are  drawn  on  each  frame  and  the  frequency  with 
which  the  appear. 

- Dust  size:  The  size  of  each  dust  particle. 

- Film  fade:  The  type  of  film  fade  effect  to  apply.  The  film  fade 
parameter  can  take  one  of  the  following  values:  None,  Sepia 
tone,  Black  and  White,  Faded  color  film,  1930’s  color  film. 
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General  Convolution:  This  effect  applies  a general  purpose  convolu- 
tion effect  to  a single  track.  The  effect  that  results  is  determined  by 
the  values  entered  into  the  kernel  parameters  of  the  effect.  The  ker- 
nel for  this  convolution  is  a 3-by-3  matrix  of  values,  consisting  of  the 
Cells  1 through  9. 

The  convolution  algorithm  examines  every  pixel  of  the  source,  and 
the  eight  pixels  surrounding  it.  These  values  are  multiplied  by  the 
appropriate  values  in  the  cells  and  summed.  This  sum  is  then  used 
as  the  value  of  the  corresponding  destination  pixel. 

HSL  Balance:  This  filter  effect  allows  you  to  independently  adjust  the 
hue,  saturation  and  lightness  channels  of  a single  track.  The  HSL  bal- 
ance filter  effect  has  three  parameters: 

• Hue  multiplier:  Adjusts  the  hue  channel  value  of  each  pixel. 

• Saturation  multiplier:  Adjusts  the  saturation  channel  value  of 
each  pixel. 

• Lightness  multiplier:  Adjusts  the  lightness  channel  value  of  each 
pixel. 

RBG  Balance:  The  RGB  balance  fi Iter  a I lows  you  to  independently  ad- 
just the  alpha,  red,  green  and  blue  channels  of  a single  track.  The 
RGB  balance  filter  has  three  parameters: 

• Red  multiplier:  Adjusts  the  red  channel  value  of  each  pixel. 

• Green  multiplier:  Adjusts  the  green  channel  value  of  each  pixel. 

• Blue  multiplier:  Adjusts  the  blue  channel  value  of  each  pixel. 

Sharpen:  This  effect  applies  a convolution  sharpen  effect.  The  sharp- 
ening that  isapplied  is  determined  by  the  convolution  kernel.  This  is 
a matrix  of  values  that  are  applied  to  each  pixel  of  the  source  track. 
The  sharpen  filter  effect  has  two  parameters: 

• Amount  of  sharpening:  This  popup  menu  gives  you  a choice  of 
seven  values,  from  1 - least  to  7-  most.  The  higher  the  value,  the 
faster  the  effect  will  run  and  the  greater  the  degree  of  sharpen- 
ing 

• Brightness:  The  default  value  of  1.0  sharpens  the  source  track 
but  doesn’t  change  its  brightness.  Values  between  0.0  and  1.0 
decrease  brightness,  values  greater  than  1 .0  increase  brightness. 
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Dual-Source  Effects 

The  following  effects  are  alpha  channel  based: 

Alpha  Compositor:  This  effect  is  used  to  combine  two  images  using 
the  alpha  channels  of  the  images  to  control  the  blending.  It  provides 
for  the  standard  alpha  blending  options,  and  can  handle  pre-multi- 
plying  by  any  color,  although  whiteand  blackare  most  common  and 
often  run  faster.  The  alpha  compositor  effect  has  two  parameters: 

• Blend  mode:  The  blend  mode  parameter  can  contain  one  of  the 
following  values: 

- Straight  alpha  performs  a standard  alpha  blend.  The  alpha 
channel  value  of  the  first  track  defines  the  amount  of  that 
track  that  is  included  in  the  composite  image,  and  one  minus 
the  alpha  channel  value  of  the  first  track  defines  the  amount 
of  the  second  track  that  is  included  in  the  composite  image. 

- Pre-multiply  alpha  calculates  the  destination  pixel  based  on 
the  color  you  specify  in  the  Pre-multiply  color  held  below. 

- Reverse  alpha  performs  a reverse  alpha  blend. 

Chroma  Key:  The  chroma  key  effect  combines  two  tracks  by  replac- 
ing all  the  pixels  of  the  first  track  that  are  the  color  specified  in  the 
Key  Color  color  field  with  the  corresponding  pixels  of  the  second 
track.  This  allows  the  second  track  to  “show  through”  the  first  in 
those  places  where  the  first  track  has  the  specified  color: 

• Key  Color:  The  chroma  key  color  to  replace  in  the  first  track  with 
pixels  from  the  second  track. 

The  following  effects  are  transitions  between  two  tracks: 

Cross  Fade:  A “cross  fade”  or  “dissolve”  provides  a smooth  alpha 
blending  between  two  video  sources,  which  changes  over  time  to 
give  a smooth  fade  out  from  the  first  track  into  the  second.  This  ef- 
fect has  a single  parameter  only: 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 

Explode:  In  an  explode  effect,  track  B grows  from  a single  point  ex- 
panding out  until  it  entirely  covers  track  A.  This  effect  has  three  pa- 
rameters: 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 

• Explode  Center X:  The  x-coordinate  of  the  explosion  centre. 

• Explode  Center  Y:  The  y-coordinate  of  the  explosion  centre. 
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Gradient  Wipe:  The  Gradient  Wipe  effect  transitions  between  two 
tracks,  with  the  change  pattern  controlled  by  an  input  image.  At  the 
start  of  the  effect,  the  area  covered  by  the  input  image  shows  the  fi rst 
track,  while  the  area  outside  the  input  image  shows  the  second.  Over 
the  duration  of  the  effect,  the  input  image  is  shrunk  until  only  the 
second  track  is  visible.  The  gradient  wipe  effect  has  two  parameters: 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 

• Matte:  The  input  image  that  controls  the  transition  between  the 
two  tracks. 

Implode:  In  an  implode  effect,  track  A shrinks  down  to  a single 
point,  revealing  track  B.  The  center  point  of  the  implosion  is  defined 
in  the  effect  parameters.  The  implode  effect  has  three  parameters: 

• Implode  center X:  The  x-coordinate  of  the  implosion  centre. 

• Implode  center  Y:  The  y-coordinate  of  the  implosion  centre. 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 

Push:  A push  is  an  effect  where  one  source  image  replaces  another, 
with  both  tracks  moving  at  the  same  time.  For  example,  track  A 
would  typically  occupy  the  entire  screen,  and  then  track  B would 
slide  in  from  the  left,  while  track  A slides  out  to  the  right  at  the  same 
time.  The  push  effect  has  two  parameters: 

• Push  from:  Controls  the  direction  from  which  track  B will  replace 
track  A.  This  parameter  can  contain  Top,  Right,  Bottom,  and  Left. 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 

Slide:  In  a slide  effect,  track  B slides  onto  the  screen  to  cover  track  A. 
At  the  end  of  the  effect,  track  B will  completely  cover  track  A.  The 
slide  effect  has  two  parameters: 

• Angle:  The  angle  from  which  track  B will  enter  the  frame.  This 
value  is  expressed  in  degrees,  with  0 degrees  defined  as  the  top 
of  the  screen. 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 
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Iris,  Matrix  Wipe,  Radial,  Wipe:  Each  of  these  effects  is  an  implemen- 
tation of  a series  of  masking  or  “reveal”  type  effects  that  take  place 

between  two  tracks.  Each  has  seven  parameters: 

• Percentage:  The  two  slider  controls  let  you  manipulate  the 
degree  of  visibility  of  either  source  during  the  blend. 

• Wipe  Type:  By  setting  this  parameter,  you  control  which  of  the 
13  available  wipes,  listed  in  the  Wipe  Type  popup  menu,  is  used. 
You  can  preview  the  wipe  types  in  the  preview  pane  of  the  Select 
effects...  dialog  box. 

• Horizontal  repeat:  The  number  of  horizontal  repeats  of  the 
effect  that  occur  in  a single  track. 

• Vertical  repeat:  The  number  of  vertical  repeats  of  the  effect  that 
are  executed  in  a single  track. 

• Border  width:  The  width,  in  pixels,  of  a border  that  is  drawn 
around  the  second  track. 

• Border  color:  The  RGB  color  of  the  border  around  the  second 
track. 

• Soft  edges:  If  the  checkbox  is  activated  for  this  parameter,  the 
border  drawn  around  the  second  track  is  blurred. 


A sprite  track  contains  graphic  objects  (referred  to  as  sprites)  that  can 
be  animated  independently.  Like  a video  track,  a sprite  track  consists 
of  a sequence  of  frames  that  play  back  at  a certain  frame  rate.  But, 
unlike  a video  track  which  is  a continuous  stream  of  pixel  images,  a 
sprite  track  relies  on  a pool  of  images  (referred  to  as  the  “image  gal- 
lery”) stored  with  its  first  keyframe.  The  advantage  is  that  subsequent 
frames  need  not  contain  the  pixel  image  itself,  but  simply  a refer- 
ence to  an  item  in  the  image  pool.  This  makes  this  kind  of  movies 
much  smaller  in  file  size  than  pixel-based  video,  and  thus  making 
your  animations  load  faster. 

By  editing  the  sprite  track,  you  specify  how  each  sprite  moves  around 
the  “stage”,  that  is,  the  place  in  the  browser  window  where  your 
QuickTime™  animation  appears.  The  following  sections  provide 
step-by-step  instructions  for  inserting  a sprite  track  and  editing  its 
content. 
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Inserting  a 
Sprite  Track 


To  insert  a sprite  track  and  set  basic  display  properties,  proceed  as 

follows: 

1 Open  or  create  a movie,  as  explained  in  the  section  Opening  and 
Creating  a QuickTime™  Movie  on  page  384. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

3 Drag  the  Sprite  Track  item  (shown  at  left)  from  the  QuickTime™ 
tab  of  the  Palette  onto  the  main  window  area  of  the  Track  Editor. 

4 This  inserts  a new  sprite  track,  which  appears  as  a solid  bar  in  the 
Track  Editor.  The  new  track  is  named  something  like  Sprite 
Track  7.  At  the  same  time,  the  context-sensitive  Inspector  window 
turns  into  the  Sprite  Track  Inspector. 

Alternatively,  you  can  also  use  the  method  described  under  Copying 

a Selected  Track  from  Another  Movie  on  page  386  to  copy  a selected 

sprite  track  from  an  existing  movie. 

5 Go  to  the  Basic  tab  of  the  Sprite  Track  Inspector  (shown  below), 
place  the  cursor  in  the  text  box  next  to  the  sprite  track  icon,  and 
enter  a name  for  the  new  track. 

6 Usetheotheroptionsinthe  Basic  tab  of  the  Sprite  Track  Inspector 
to  edit  basic  properties  for  the  new  sprite  track: 

- Left  and  Top:  Use  these  text  boxes  to  position  the  track  in  the 
movie.  Please  note  that  if  Left  and  Top  exceed  the  values 
specified  for  Width  and  Height,  respectively,  your  sprite  may 
be  clipped. 

Width  and  Height:  Use  these  text  boxes  to  set  the  vertical  and 
horizontal  dimensions  of  the  track. 

- Constrain  Proportions:  By  activating  this  checkbox,  you  force 
the  movie  to  resize  proportionally.  For  example,  when  you 
edit  the  value  in  the  Width  text  box,  Adobe  GoLive  adjusts  the 
Height  setting  automatically  to  maintain  the  original  height- 
to-width  ratio  of  the  track. 

- Layer:  Use  this  text  box  to  specify  the  layering  of  the  sprite 
track  within  the  movie.  The  lower  the  layer  number  you  en- 
ter, the  farther  to  the  front  the  sprite  appears. 

- Graphics  Mode:  Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  sprite  track  overlays  on  other 
tracks  within  the  movie.  For  a brief  description  of  the  graph- 
ics mode  options,  please  refer  to  page  408. 
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The  Basic  Tab  of  the  Sprite  Track  Inspector 

Click  this  tab  to  set  general  properties  of  the  sprite 
track. 

Use  this  text  box  to  name  the  sprite  track. 

Use  these  text  boxes  to  position  the  sprite  track. 
Use  these  text  boxes  to  resize  the  sprite  track. 

Use  this  checkbox  to  control  resizing  behavior. 

Use  this  text  box  to  control  the  layering  of  the 
sprite  track. 


These  text  boxes  display  general  properties. 


Sprite  Track  Inspector 


- Basic  j Properties  ^ Sprites  ^ Images  ^ 


64 


-I  Favorite  sprites 


Top 


Left  [T 
Vidth  1 520  | Height  |240 


[v^ Constrain  Proportions 
Layer  |p 


Graphics  Mode  | Dither  Copy 


Start  Time 
Duration 
Track  Type 
Data  Size 
Data  Rate 
Sprites 
Images 


00:00:00.25 
Sprite 
44.4  K 
53.3  K/Sec 
[7 
25 


Choose  an  option  from  the  Graphics 
Mode  popup  menu  to  specify  how  the 
HREF  track  overlays  on  other  tracks  with- 
in the  movie. 

The  color  field  lets  you  pick  a color  from 
the  Color  Palette  for  use  with  the  Blend 
and  Transparent  graphics  modes  (see 
page  408). 


The  other  fields  are  not  user-editable.  They  will  be  updated  as  you 
add  sprites  to  the  track  and  edit  their  properties. 

- Start  Time:  Displays  the  start  time  of  the  track,  which  is  usu- 
ally “time  zero”.  You  can  change  the  start  time  of  a track  by 
clicking  its  bar  in  the  Track  Editor  and  dragging  it  in  the  de- 
sired direction. 


Duration:  The  duration  of  the  track  is  determined  by  the 
rightmost  keyframe  you  set  in  the  Track  Editor. 

Track  Type:  This  text  field  shows  the  track  type,  Sprite. 

Data  Size:  This  text  field  displays  the  data  size  in  bytes. 

Data  Rate:  This  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 

Sprites:  This  text  field  tells  you  how  many  sprites  there  are  in 
the  current  track. 


- Images:  This  text  field  shows  the  number  of  images  in  the  gal- 
lery. 
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Preparing  the  Stage: 
Setting  General  Sprite 
Track  Properties 


After  inserting  a sprite  track,  you  should  set  a few  of  its  basic  proper- 
ties. The  following  screenshot  shows  the  Properties  tab  of  the  Sprite 
Track  Inspector.  This  tab  lets  you  specify  general  options  for  the 
“stage”  on  which  your  sprites  are  going  to  perform. 


Setting  General  Sprite  Track  Properties  in 
the  Properties  Tab  of  the  Sprite  Track 

This  checkbox  hides  or  shows  the  sprite  track. 

This  checkbox  ensures  that  the  sprite  track  scales 
without  distortion. 

This  checkbox  and  color  field  combination  sets  the 
background  color  for  the  sprite  track. 


Click  this  tab  to  set  general  properties  for  the 
sprite  track. 


To  set  basic  properties  for  a new  sprite  track,  proceed  as  follows: 

1  Select  the  newly  created  sprite  track  from  the  track  list  in  the 
Track  Editor.  The  context-sensitive  Inspector  window  now  turns 
into  the  Sprite  Track  Inspector. 


2  Click  the  Properties  tab  of  the  Sprite  Track  Inspector  to  display  the 
general  settings. 


3  Select  the  Visible  checkbox  to  have  the  sprite  track  displayed  in 
the  Movie  Viewer  window  (and  the  movie  as  such).  By  deselecting 
this  checkbox,  you  can  temporarily  hide  the  sprite  track  to  view 
tracks  below  it. 


4 Select  the  Scale  Sprites  When  Track  Is  Resized  checkbox  if  your 
sprites  contain  vector  graphics.  This  option  ensures  that  your 
sprites  scale  smoothly  when  the  sprite  track  is  resized.  If  this 
checkbox  is  not  selected,  sprites  with  vector  graphics  may  look 
jagged  after  resizing. 

5 Select  the  color  field  next  to  the  Background  Color  checkbox  to  se- 
lect a background  color  for  the  “stage”. 

Deselecting  the  color  field  makes  the  background  white. 

6 The  stage  is  now  set.  The  following  sections  tell  you  how  to  hire 
and  conduct  actors. 
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Hiring  Actors:  Importing 
Graphics 


An  Image  Gallery  in  the  Images  Tab  of  the 
Sprite  Track  Inspector 

A preview  of  the  selected  image  appears  here. 


Images  from  the  gallery  are  listed  here. 


Use  this  text  box  to  name  the  imported  image. 


3 


The  Compression  Settings  Dialog  Box 


This  popup  menu  lets  you  select  one  of  Quick- 
Time’s built-in  image  compressors. 

This  popup  menu  lets  you  pick  the  choice  of  colors 
to  be  used  for  the  imported  graphic. 

This  slider  control  lets  you  set  the  amount  of  com- 
pression applied  to  the  imported  image. 


The  next  step  involves  adding  the  graphics  you  want  to  use  as  sprites. 
You  can  use  still  images  with  the  following  formats  as  sprites:  3DMF, 
BMP,  GIF,  JPEG/JFIF,  MacPaint,  Photoshop,  PICT,  PNG,  QuickDraw  GX 
(requires  the  QuickDraw  GX  extension),  QuickTime  Image  Format, 
SGI,  Targa,  and  TIFF.  By  importing  graphics,  you  create  an  image  gal- 
lery in  the  Images  tab  of  the  Sprite  Track  Inspector  (see  screenshot  be- 
low). 


Click  this  tab  to  view  the  image  gallery  or  im- 
port images  for  sprites. 


Click  this  button  to  import  more  images. 


To  import  images  into  the  gallery,  proceed  as  follows: 

1 Select  the  newly  created  sprite  track  from  the  track  list  in  the 
Track  Editor.  This  turns  the  context-sensitive  Inspector  window 
into  the  Sprite  Track  Inspector. 

2 Click  the  Images  tab  of  the  Sprite  Track  Inspector  to  display  the 
image  gallery. 

3 Click  the  Add  button.  This  opens  a file  selection  dialog  box.  Find 
and  select  an  image  and  then  click  Open  to  start  importing. 

4 The  Compression  Settings  dialog  boxappears,  and  prompts  you  to 
pick  an  image  compression  option. 


The  preview  pane  shows  how  the  image  compres- 
sor settings  you  choose  impact  on  image  quality. 
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5 Select  an  image  compressor  from  the  top  popup  menu,  if  de- 
sired. 

QuickTime™  comes  with  numerous  built-in  image  format  com- 
pressors that  cover  most  of  the  media  formats  used  on  the  Inter- 
net and  for  general  screen  publishing  purposes.  Your  choice  of 
compressor  should  depend  on  the  type  of  the  image  and  reason- 
able movie  file  size  limitations.  We  recommend  that  you  try  the 
default  option  first.  If  this  proves  unsatisfactory,  experiment  with 
other  compressors  to  find  the  setting  that  best  suits  your  needs. 

6 Select  a color  space  to  use  in  your  movie  from  the  second  popup 
menu,  if  desired. 

The  menu  choices  for  images  range  from  black  and  white  to  256 
colors,  depending  on  the  compressor  you've  chosen.  Most  graph- 
ics compressors  offer  choices  that  just  say  “Color”  (equivalent  to 
256  colors)  and  “Grayscale”.  The  preview  pane  to  the  right  shows 
how  your  color  settings  affect  the  image. 

7 Drag  the  Quality  slider  control  to  set  the  quality  of  the  images  in 
your  sprite  track.  As  you  drag  the  slider  between  the  Least  and 
Best  labels,  it  shows  numerical  values  from  0 to  100.  Image  qual- 
ity and  degree  of  compression  are  inversely  proportional:  the 
higher  you  set  the  quality,  the  lower  the  compression  ratio  will 
be.  The  preview  pane  to  the  right  shows  how  your  quality  settings 
affect  the  image. 

8 When  you  are  done  making  image  compression  settings,  click 
OK. 

9 Adobe  GoLive  now  imports  the  graphic  and  adds  it  to  the  image 
gallery  located  in  the  Images  tab  of  the  Sprite  Track  Inspector. 

10  Locate  and  select  the  newly  imported  image  in  the  image  gallery 
list  box,  then  go  to  the  Image  Name  text  box  and  rename  the  im- 
age, if  desired.  (On  importing,  Adobe  GoLive  names  the  new  im- 
age according  to  its  filename.) 

11  Add  more  images  of  the  same  object  to  create  an  animated  se- 
quence, as  set  out  in  the  preceding  steps. 
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Conducting  Actors: 
Creating  and  Editing 
Sprites 


Once  you  have  completed  yourimagegalleryand  set  the  “stage”,  you 
are  ready  to  create  sprites  and  animate  them.  The  following  screen- 
shot  shows  the  Sprites  tab  of  the  Sprite  Track  Inspector — the  tool  you 
will  use  for  sprite  creation. 


Creating  Sprites  in  the  Sprites  Tab  of  the 

Sprite  Track  Inspector 

Click  this  tab  to  create  and  edit  sprites. 


Existing  sprites  are  listed  here. 


Use  this  text  box  to  name  the  selected  sprite. 


Use  these  text  boxes  to  position  the  sprite  on  the 
stage. 

On  tracks  with  multiple  sprites,  use  this  popup 
menu  to  control  how  sprites  overlay  on  each  other. 

A preview  of  the  selected  image  appears  here.  You 
can  use  the  popup  menu  to  select  an  initial  image 
from  the  gallery. 
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Click  this  button  to  insert  a new  sprite. 


Use  this  text  box  to  control  the  layering  of 
sprites  on  the  same  track. 

Use  this  option  to  control  the  visibility  of 
the  sprite. 

Use  this  color  field  to  pick  a color  for  the 
current  graphics  mode.  Your  choice  of 
color  controls  how  sprites  combine  in 
the  visual  presentation  of  the  sprite 
track. 


To  create  a sprite,  proceed  as  follows: 

1 Select  the  newly  created  sprite  track  from  the  track  list  in  the 
Track  Editor.  The  context-sensitive  Inspector  window  now  turns 
into  the  Sprite  Track  Inspector. 

2 Click  the  Sprites  tab  of  the  Sprite  Track  Inspector  to  display  the 
sprite  creation  and  editing  tools. 

3 Click  the  Add  button.  Adobe  GoLive  adds  a new  sprite  named 
something  like  Sprite  7 to  the  sprite  list  at  the  top  of  the  window. 

4 Leave  the  new  sprite  selected.  Go  to  the  Name  text  box  and  re- 
name the  sprite. 

5 Go  to  the  Left  and  Top  text  boxes  and  enter  values  (in  pixels)  to 
position  the  initial  image  at  the  beginning  of  the  sprite  track. 

6 Go  to  the  Layer  text  box  and  enter  a digit  to  control  the  front-to- 
back  order  of  sprites  on  the  same  track.  The  lower  the  number 
you  enter  here,  the  further  to  the  front  the  sprite  appears. 

7 Leave  the  Visible  checkbox  selected,  if  you  want  your  sprite  to  be 
visible  at  the  beginning  of  the  track. 

8 If  you  have  more  than  one  sprite  on  your  track,  you  may  need  to 
use  the  Graphics  Mode  popup  menu  to  specify  how  sprites  over- 
lay on  each  other. 
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Dither  Copy 


Straight  Alpha 
Straight  Alpha  Blend 
Premul  White  Alpha 
Premul  Black  Alpha 
Composition  (Dither  Copy) 


Choose  an  option  from  th e Graphics  Mode  popup  menu  to  specify 

how  the  images  on  the  track  are  drawn: 

- Dither  Copy  (default  mode)  simply  overlays  the  image  on  a 
track  directly  below  it  and  applies  dithering  to  make  it  look 
better.  There  is  no  interaction  between  a track  in  Copy  mode 
and  tracks  below  it. 

- Copy  mode  does  basically  the  same  as  Dither  Copy,  but  its 
lack  of  dithering  capability  makes  it  less  suitable  for  display 
on  systems  in  256-color  mode.  However,  this  option  may  pro- 
vide better  performance  in  tight  situations. 

- Blend  mode  makes  the  track  translucent,  so  you  can  partially 
see  through  to  the  track  below.  The  degree  and  color  of  the 
transparency  can  be  set  by  clicking  the  color  field  next  to  the 
Graphics  Mode  popup  menu,  which  brings  up  the  Color  Pal- 
ette. In  the  Color  Palette,  you  choose  a color  and  then  drag  it 
from  the  preview  pane  at  the  top  to  the  Graphics  Mode  color 
field  in  the  Sprite  Track  Inspector.  The  lighter  the  color,  the 
less  translucent  the  track  will  be;  the  darker  the  color,  the 
more  translucent  it  will  be. 

Transparent  mode  lets  you  define  a transparent  color  for  any 
visual  track.  Choose  the  color  as  described  under  Blend 
mode. 


The  next  4 modes  are  all  based  on  alpha  channels.  An  alpha  channel 
defines  how  an  image  is  combined  with  a background  image  already 
present  at  the  location  where  the  image  will  appear.  By  defining  an 
alpha  channel  you  specify  which  part  of  a visible  image  should  be 
left  out  (the  proper  term  is  “masked”)  in  order  to  make  a background 
image  appear  in  that  area.  The  “alpha”  graphics  modes  in  this  menu 
enable  Adobe  GoLive  to  display  movies  with  alpha  channel  content: 

- Straightalpha  meansthatthecolorcomponentsof  each  pixel 
should  be  combined  with  the  background  pixel  at  the  same 
location  based  on  the  value  contained  in  the  alpha  channel. 

- Premul  white  alpha  supports  images  created  on  a white  back- 
ground with  a premultiplied  alpha  channel. 

- Premul  black  alpha  supports  images  created  on  a black  back- 
ground with  a premultiplied  alpha  channel. 

- Straight  alpha  blend  is  a combination  of  straight  alpha  and 
blend,  so  the  masked  areas  will  be  transparent,  and  the  non- 
transparent areas  will  be  translucent.  As  with  the  Blend 
mode,  you  can  use  the  Color  Palette  to  edit  the  degree  of 
translucency. 
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- Composition  (Dither  Copy)  mode  is  similar  to  Copy  and  Dither 
Copy,  but  more  appropriate  for  video  tracks  created  from  an- 
imated GIF  files. 

9  Go  to  the  Initial  Image  section  and  choose  the  first  image  in  the 
sprite  animation  from  the  popup  menu. 


10  Return  to  the  Track  Editor.  In  the  track  list,  click  the  triangle  sym- 
bol next  to  the  name  of  the  new  sprite  track.  This  expands  the 
view  of  the  track  and  displays  the  sprite  created  in  step  3 on 
page  407  on  a sub-track.  You  will  also  notice  that  a new  symbol 
has  appeared  on  the  sprite  sub-track.  This  is  a keyframe.  A key- 
frame  marksa  point  in  the  timeline  at  which  theauthorwants  to 
change  a property  of  a sprite.  When  you  select  a keyframe,  you 
can  edit  the  sprite  that  it  refers  to  in  the  Sprite  Sample  Inspector 
shown  below  and  change  its  appearance. 

11  Option-click  the  first  keyframe  and  drag  it  to  the  right  along  the 
sub-track.  When  you  drop  the  object,  a new  keyframe  appears. 

12  Leave  the  new  keyframe  selected  and  return  to  the  context-sen- 
sitive Inspector  window,  now  titled  Sprite  Sample  Inspector  (see 
below). 


Editing  a Sprite  Sample  in  the  Properties 
Tab  of  the  Sprite  Sample  Inspector 
Click  this  tab  to  edit  sprite  samples. 

Use  these  text  boxes  to  position  the  sprite  on  the 
stage. 

In  movies  with  multiple  tracks,  use  this  popup 
menu  to  control  the  appearance  of  tracks  nearerto 
the  front. 


A preview  of  the  current  image  appears  here.  You 
can  use  the  popup  menu  to  select  an  image  from 
the  gallery. 


The  options  on  this  tab  let  you  wire 
sprites  with  actions. 

Use  this  text  box  to  control  the  layering  of 
sprites  on  the  same  track. 

Use  this  option  to  control  the  visibility  of 
the  sprite. 

Use  this  color  field  to  select  a color  for 
the  current  graphics  mode.  Your  choice 
of  color  controls  how  sprites  combine  in 
the  visual  presentation  of  the  sprite 
track. 


The  Sprite  Sample  Inspector  lets  you  make  the  same  settings  for  a key- 
frame  as  the  Sprites  tab  of  the  Sprite  Track  Inspector  does  for  the  ini- 
tial appearance  of  a sprite.  You  can  modify  the  physical  location  of 
the  sprite  on  the  stage  using  the  Left  and  Top  text  boxes  (thus  creat- 
ing the  visual  impression  of  motion),  change  the  layering  of  sprites 
using  the  Layer  text  box,  control  visibility  using  the  Visible  checkbox, 
and  make  the  sprite  opaque  or  transparent  with  the  Graphics  Mode 
options.  Most  importantly,  the  Sprite  Sample  Inspector  features  a 
popup  menu  and  a preview  pane  to  let  you  pick  an  image  from  the 
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Wired  Sprites 
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Wiring  a Sprite  in  the  Actions  Tab  of  the 
Sprite  Sample  Inspector 

This  list  lets  you  choose  the  event(s)  the  sprite  is 
supposed  to  respond  to. 

This  popup  menu  contains  the  entire  inventory  of 
actions  you  can  use  for  wiring  sprites. 

A brief  description  appears  for  each  sprite  action 
you  choose  from  the  Action  Kind  menu  appears 
here. 
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gallery.  This  image  appears  at  the  point  of  the  animation  deter- 
mined by  the  new  keyframe  you  have  inserted  in  step  10  above. 

For  detailed  instructions  on  using  these  options,  please  refer  to  the 
description  of  the  Sprite  Track  Inspector  on  the  preceding  pages. 

13  Set  up  the  new  keyframe  as  desired,  then  add  more  keyframes  as 
explained  in  step  11  above  and  tweak  their  appearance  in  the 
Sprite  Sample  Inspector. 

14  Click  the  Play  button  [7]  in  the  Track  Editor  to  preview  the  ani- 
mation in  the  Movie  Viewer  window. 


Wired  sprites  let  you  add  true  interactivity  to  your  QuickTime™  mov- 
ies, allowing  them  to  respond  to  events  caused  by  visitors  to  your 
page.  Tracks  with  wired  sprites  can  be  used  as  stand-alone  anima- 
tions or  overlaid  on  other  types  of  tracks  to  provide  custom  controls. 
They  play  back  in  any  Web  browser  that  has  the  QuickTime™  plug-in 
installed.  For  example,  you  can  make  sprite  buttons  and  “wire”  them 
so  that  they  jump  to  specific  URLs,  start  or  stop  the  movie,  or  set  the 
audio  volume  when  pressed. 

When  you  wire  a sprite  track,  you  insert  keyframes  and  attach  actions 
to  them,  as  explained  below. 

To  wire  a sprite  with  an  action,  proceed  as  follows: 

1 Locate  the  desired  sprite  on  the  sprite  track  and  click  the  key- 
frame  with  which  you  want  to  launch  the  action.  If  you  need  a 
new  keyframe,  Option-click  any  existing  keyframe  and  drag  to 
the  desired  location  on  the  sprite  track  to  insert  one. 

2 Clicking  or  creating  a keyframe  turns  the  context-sensitive  Inspec- 
tor window  into  the  Sprite  Sample  Inspector. 

3 In  the  Sprite  Sample  Inspector,  click  the  Actions  tab  (see  below)  to 
display  the  tools  for  wiring  sprites. 


These  buttons  add  and  remove  actions. 

This  list  shows  the  action  attached  to  the 
currently  selected  event. 
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4 Select  an  event  from  the  Events  list  to  determine  what  the  visitor 
should  do  to  trigger  a sprite  action: 

- Click  triggers  an  action  when  the  user  presses  the  mouse  but- 
ton (without  releasing  it)  while  the  cursor  is  on  top  of  a sprite. 

- Click  End  triggers  an  action  when  the  user  releases  the  mouse 
button  while  the  cursor  is  on  top  of  a sprite. 

- Click  Button  triggers  an  action  upon  a single  mouse  click  on  a 
sprite  that  acts  as  a button. 

- Mouse  Enter  triggers  an  action  when  the  mouse  pointer  is 
moved  over  a sprite. 

- Mouse  Exit  triggers  an  action  when  the  mouse  pointer  is 
moved  away  from  a sprite. 

5 Click  the  “+”  button  to  attach  an  action  to  the  event. 

6 Go  to  the  Action  Kind  menu  and  choose  an  action — for  example, 
Movie  GoTo  Beginning.  After  you  have  made  your  choice,  a brief 
description  of  the  action  appears  below  the  popup  menu. 

A complete  listing  of  all  sprite  actions  is  given  further  below. 

7 Repeat  steps  4 through  6 if  you  want  to  wire  the  sprite  with  addi- 
tional actions.  For  example,  you  can  combine  any  of  the  mouse- 
click  events  with  one  of  the  two  mouse-over  events  to  make  the 
sprite  respond  not  only  when  being  clicked  but  also  when  the  vis- 
itor moves  the  mouse  cursor  over  it. 

Active  events  are  now  identified  by  dot  symbols  (“•”)  that  appear 
at  the  right  edge  of  the  Events  list. 

8 Click  the  Play  button  [T[  in  the  Track  Editor  to  preview  the  ani- 
mation in  the  Movie  Viewer  window. 

Adobe  GoLive  comes  with  a complete  set  of  ready-to-use  sprite  ac- 
tions for  QuickTime™  movies.  These  actions  can  be  attached  to  single 
keyframes  in  a sprite  track. 

The  following  sprite  actions  enable  you  to  control  the  movie: 

• Movie  Set  Volume:  use  this  action  to  set  the  audio  volume  of  the 
movie.  This  menu  option  displays  a text  box  that  lets  you  enter  a 
level  between  0 (minimum)  and  255  (maximum). 

• Movie  Set  Rate:  sets  the  movie’s  playback  speed.  This  menu 
option  displays  a text  box  that  lets  you  enter  any  of  the  following 
values  (decimals  or  whole  numbers  allowed): 

- 1 : playback  at  normal  speed 

- 2:  playback  at  double  speed 
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- 0 stop 

- -1,  -2,  etc.:  movie  plays  backwards. 

• Movie  Set  Looping  Flags:  sets  the  looping  mode  for  movie  play- 
back. This  menu  option  displays  a popup  menu  that  lets  you 
choose  from  the  following  values: 

None:  movie  plays  from  beginning  to  end,  then  stops. 

Loop:  movie  plays  from  beginningto  end,  then  resumes  play- 
back at  the  beginning. 

Loop  and  palindrome:  movie  plays  from  beginning  to  end, 
then  backwards  until  reaching  the  beginning,  from  which 
point  on  it  will  play  forward  again. 

• Movie  GoTo  Time : jumps  to  a user-specified  time  in  the  movie. 
This  menu  option  displays  a text  box  with  up  and  down  arrows 
that  let  you  adjust  the  desired  time.  The  maximum  value  is 
given  by  the  movie’s  duration. 

• Movie  GoTo  Beginning:  jumps  to  the  beginning  of  the  movie. 

• Movie  GoTo  End:  jumps  to  the  end  of  the  movie. 

• Movie  Step  Forward:  advances  the  movie  in  the  same  fashion  as 
the  Step  Forward  button  in  the  Movie  Viewer  window. 

• Movie  Step  Backward:  Rewinds  the  movie  in  the  same  fashion  as 
the  Step  Backward  button  in  the  Movie  Viewer  window. 

• Movie  Set  Selection:  selects  part  of  the  movie,  based  on  a user- 
specified  time  range.  This  menu  option  displays  two  Start  Time 
and  End  Time  text  boxes  with  up  and  down  arrows  that  let  you 
adjust  the  limits  of  the  time  range.  Also  adds  an  Apply  button. 

• Movie  Play  Selection:  plays  only  the  current  movie  selection 
specified  by  a Movie  Set  Selection  action.  This  menu  option  dis- 
plays a checkbox  that  toggles  Movie  Play  Selection  on  and  off. 

• Track  Set  Enabled:  enables  or  disables  a track,  regardless  of  its 
type.  You  can  use  it,  for  example,  to  switch  between  two  differ- 
ent sound  tracks. 

The  following  actions  enable  you  to  control  a sprite’s  spatial  proper- 
ties: 

• Sprite  Set  Matrix:  sets  the  sprite’s  matrix,  allowing  the  visitor  to 
move  the  sprite  around.  This  menu  option  displays  a popup 
menu  that  lets  you  choose  from  a selection  of  known  sprites  as 
well  as  two  Top  and  Left  text  boxes  that  let  you  specify  the 
sprite’s  initial  position. 
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• Sprite  Set  Image  Index:  selects  a certain  image  from  the  image 
gallery  of  the  sprite  track.  Displays  image  selection  tools  in  the 
Inspector,  including  the  preview  pane  as  well  as  the  popup 
menu  known  from  the  Sprite  Track  Inspector  (see  page  407)  and 
Sprite  Sample  Inspector  (see  page  409). 

• Sprite  Set  Visible:  shows  or  hides  the  current  sprite.  This  menu 
option  displays  a popup  menu  that  lets  you  choose  from  a selec- 
tion of  known  sprites  as  well  as  a Visible  checkbox  that  shows  and 
hides  the  sprite. 

• Sprite  Set  Layer:  sets  the  current  sprite’s  layer  number,  specifying 
its  front-to-back  order  relative  to  other  sprites  on  the  same 
track.  This  menu  option  displays  a popup  menu  that  lets  you 
choose  from  a selection  of  known  sprites  as  well  as  a text  box  that 
accepts  the  layer  number.  The  lower  the  layer  number  you 
enter,  the  farther  to  the  front  the  sprite  appears.  The  number 
32767  indicates  that  this  is  a background  sprite. 

The  following  action  is  global,  that  is,  it  doesn’t  control  the  movie 

playback  window: 

• GoTo  URL:  if  the  movie  is  playing  back  through  the  QuickTime™ 
browser  plug-in,  this  causes  the  browser  to  jump  to  the  specified 
URL  This  menu  option  displays  Adobe  GoLive’s  typical  link  selec- 
tion options,  including  the  URL  text  box,  the  Browse. . . button, 
and  the  Point  & Shoot  button  that  lets  you  link  to  a page  or  an 
URL  in  the  Site  Window. 

If  required  by  the  structure  of  your  site,  you  can  enable  the  Abso- 
lute checkbox  to  convert  the  path  to  the  referenced  object  to  an 
absolute  path.  This  option  is  discussed  in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute  Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe  GoLive. 


The  Track  Editor  in  Adobe  GoLive  lets  you  import  sounds  in  various 
popular  formats,  including  AIFF/AIFC,  System  7 Sound,  WAV,  and 
Sound  Designer  II.  Also  supported  are  standard  MIDI  files.  Any  sound 
or  music  track  you  import  creates  a track  in  the  Track  Editor. 
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Inserting  a Sound  or 
Music  Track  and 
Importing  Media 


Sound  Music 


To  inserta  sound  or  musictrackand  add  the  sound  you  wantto  play 
back  with  the  Web  browser's  QuickTime™  plug-in,  proceed  as  fol- 
lows: 

1 Open  or  create  a movie,  as  explained  in  the  section  Opening  and 
Creating  a QuickTime ™ Movie. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

3 Drag  the  Sound  Track  or  Music  Track  item  (shown  at  left)  from  the 
QuickTime™  tab  of  the  Palette  onto  the  main  window  area  of  the 
Track  Editor. 

4 This  opens  a file  selection  dialog  box  that  lets  you  select  a sound 
(AIFF,  AIFC,  System  7 Sound,  WAV,  and  Sound  Designer  II)  or  mu- 
sic file  (standard  MIDI)  from  your  hard  disk  or  any  other  mounted 
volume. 


The  Sound  File  Selection  Dialog  Boxes 


Use  the  audio  playback  controls  to  listen  to  a sam- 
ple of  the  sound  file. 


5 Select  a sound  or  MIDI  file  and  click  Open.  Adobe  GoLive  imports 
the  sound  or  music  track  into  the  movie  now.  The  new  track  is 
named  Sound  Track  1,  Sound  Track  2,  or  Music  Track  1,  Music 
Track 2,  and  so  on. 

6 Go  to  the  context-sensitive  Inspector,  now  titled  Sound  Track  In- 
spector or  Music  Track  Inspector,  and  enter  a name  for  the  new 
track  in  the  text  box  next  to  the  Sound  Track  or  Music  Track  icon, 
if  required. 

7 Your  sound  or  music  track  is  ready  to  play  now.  Click  the  Play 
button  m in  the  Track  Editor  to  listen  to  it  and  see  how  it  fits  in 
with  other  tracks. 
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Inspecting  a Sound  or 
Music  Track 


The  Sound  Track  Inspector 


This  text  box  lets  you  name  the  sound  track. 


The  Sound  Track  Inspector  shown  below  and  its  pendant  for  MIDI,  the 
Music  Track  Inspector,  let  you  inspect  the  basic  properties  of  a sound 
or  MIDI  file  that  you've  imported. 


The  text  box  in  the  Sound  Track  Inspector  and  Music  Track  Inspector 
lets  you  name  or  rename  the  sound  or  music  track. 

The  other  fields  in  the  Inspector  are  not  user-editable. 

- Start  Time:  displays  the  start  time  of  the  track,  which  is  usu- 
ally “time  zero”.  You  change  the  start  time  of  a track  by  click- 
ing its  bar  in  the  Track  Editor  and  dragging  it  in  the  desired 
direction. 

- Duration:  the  duration  of  the  track.  This  property  is  not  edit- 
able for  sound  or  music  tracks. 

Track  Type:  this  text  field  shows  the  track  type,  Sound  or  Mu- 
sic. 

- Data  Size:  displays  the  data  size  in  bytes. 

- Data  Rate:  this  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 

- Sample  Rate : this  text  field  shows  the  sampling  rate  of  the 
soundtrack,  for  example  11. 025  kHzformonoor21.5  kHzfor 
stereo  (not  applicable  to  music  tracks). 

- Channels:  this  text  field  tells  you  whether  the  sound  track 
contains  stereo  or  monaural  audio  (not  applicable  to  music 
tracks). 

- Sample  Size:  this  text  field  shows  whether  the  sound  track 
contains  8-bit  or  16-bit  audio  (not  applicable  to  music  tracks). 

- Compression:  this  text  field  displays  the  compressor  used  on 
the  audio  (not  applicable  to  music  tracks). 
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Using  HREF  Tracks  HREF  tracks  are  used  to  embed  URLs  on  an  additional  text  track  in  a 

QuickTime™  movie.  These  URLs  cause  the  browser  to  jump  to  a des- 
tination on  the  Web — either  automatically  or  when  the  visitor  clicks 
the  movie  display  area.  Each  URL  you  add  creates  a segment  of  spec- 
ified length.  A segment  is  a part  of  a movie  during  which  the  same 
URL  appears  in  the  movie  display  area  of  the  browser. 

Thisfeature  is  best  used  in  a page  with  HTMLframes,  where  the  mov- 
ie plays  back  in  one  frame  and  a second  frame  is  used  to  display  the 
alternative  URLs  addressed  during  movie  playback.  This  page  layout 
allows  the  movie  to  play  back  continuously,  while  the  content  of  the 
second  frame  is  being  swapped.  Content  swapping  can  be  achieved 
either  interactively  by  a mouse-click  through  the  visitor  or  automat- 
ically by  setting  the  appropriate  option  for  the  movie. 


Inserting  an 
HREF  Track 


To  insert  an  HREF  track,  proceed  as  follows: 

1 Open  or  create  a movie,  as  explained  in  the  section  Opening  and 
Creating  a QuickTime™  Movie.  Then  insert  any  visual  content, 
such  as  video  or  sprite  tracks.  Save  the  page  in  your  site. 

2 Create  a page  with  a frameset,  for  example  with  two  vertical 
frames  named  LEFT  and  RIGHT. 

3 Place  a Plug-in  placeholder  from  the  Basic  tab  of  the  Palette  on 
any  of  the  two  pages-for  example,  on  the  page  that  appears  in 
the  frame  LEFT-  and  reference  a QuickTime™  movie  using 
Point  & Shoot  or  any  other  of  the  standard  methods  supported 
by  Adobe  GoLive. 

4 Double-click  the  QuickTime™  movie  in  the  document  window. 
Adobe  GoLive  opens  the  movie  in  its  built  in  Movie  Viewer  window. 

5 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

6 Drag  the  El  REF  Track  item  (shown  at  left)  from  the  QuickTime™ 
tab  of  the  Palette  onto  the  main  window  area  of  the  Track  Editor. 

7 This  inserts  a new  empty  track  named  EIREF  Track. 

8 Go  to  the  Basic  tab  of  the  EIREF  Track  Inspector,  place  the  cursor 
in  the  text  box  next  to  the  El  REF  Track  icon,  then  enter  a name  for 
the  new  track. 
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The  Basic  Tab  of  the  HREF  Track  Inspector 

Click  this  tab  to  name  the  HREF  track,  set  its  position 
and  dimensions,  and  view  general  properties. 

Use  this  text  box  to  name  the  HREF  track. 

Use  these  text  boxes  to  position  the  HREF  track. 
Use  these  text  boxes  to  resize  the  HREF  track. 

Use  this  checkbox  to  control  resizing  behavior. 

Use  this  text  box  to  control  the  layering  of  the 
HREF  track. 


{ 

These  text  boxes  display  general  properties. 


_ 1 Basic  1 HREF  ) 


HREF  Track  Inspector 
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Choose  an  option  from  the  Graphics 
Mode  popup  menu  to  specify  how  the 
H REF  track  overlays  on  other  tracks  with- 
in  the  movie. 

The  color  field  lets  you  pick  a color  from 
the  Color  Palette  for  use  with  the  Blend 
and  Transparent  graphics  modes  (see 
page  408). 


The  fields  in  the  center  section  of  the  window  let  you  set  the  physical 
properties  of  the  HREF  track: 


Left  and  Top:  Use  these  text  boxes  to  position  the  track  in  the 
movie.  Because  the  HREF  track  is  visible  as  a black  bar  with 
white  text  in  the  movie,  we  recommend  placing  it  at  the  bot- 
tom or  the  top.  To  find  the  bottom  of  the  movie,  click  the  vid- 
eo track  and  look  at  its  Height  dimension  in  the  General  tab 
of  the  Video  Track  Inspector.  The  height  of  the  track  deter- 
mines its  bottom  dimension.  If  the  height  is,  for  example,  160 
pixels,  enter  the  same  value  in  the  Top  text  box  for  the  HREF 
track  to  position  it  below  the  video  track.  Entering  0 places 
the  HREF  track  at  the  top  of  the  track. 

Width  and  Height:  Use  these  text  boxes  to  set  the  vertical  and 
horizontal  dimensions  of  the  movie  in  the  Web  page.  The  ac- 
tual size  is  determined  by  the  track  with  the  highest  width 
and  height  settings. 

Constrain  Proportions:  By  activating  this  checkbox,  you  force 
the  movie  to  resize  proportionally.  For  example,  when  you 
edit  the  value  in  the  Width  text  box,  Adobe  GoLive  adjusts  the 
Height  setting  automatically  to  maintain  the  original  height- 
to-width  ratio  of  the  track. 


Layer:  Use  this  text  box  to  specify  the  layering  of  the  HREF 
track  within  the  movie.  The  lower  the  layer  number  you  en- 
ter, the  farther  to  the  front  the  track  appears. 

Graphics  Mode:  Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  HREF  track  overlays  on  other 
tracks  within  the  movie.  For  a brief  description  of  the  graph- 
ics mode  options,  please  refer  to  page  408. 
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The  fields  at  the  bottom  are  not  user-editable: 

- Start  Time:  Displays  the  start  time  of  the  track,  which  is  usu- 
ally “time  zero”.  You  can  change  the  start  time  of  a track  by 
clicking  on  its  bar  in  the  Track  Editor  and  dragging  it  in  the 
desired  direction. 

- Duration:  The  duration  of  the  track.  You  can  change  the 
length  of  an  HREF  track  by  adding  URLs  and  positioning  them 
along  the  timeline  of  the  movie. 

Track  Type:  Shows  the  track  type,  Text.  (An  H REF  track  is  a spe- 
cific type  of  text  track.) 

- Data  Size:  Displays  the  data  size  in  bytes. 

- Data  Rate:  This  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 


Specifying 
Destinations  on 
the  Web 


To  edit  an  HREF  track  in  a QuickTime™  movie,  proceed  as  follows: 

1  Click  the  small  triangle  control  next  to  the  track  name  in  the 
Track  Editor  to  expand  the  HREF  track. 


The  HREF  Tab  of  the  HREF  Track  Inspector 

Click  this  tab  to  specify  destination  pages  on  the 
Web  or  in  your  site. 

This  option  auto-loads  the  content  of  the  destina- 
tion URL  (instead  of  waiting  for  a mouse-dick). 

The  segments  of  the  HREF  track  are  listed  here. 


This  time  control  sets  the  start  time  for  any  seg- 
ment, except  for  the  first  one  on  a track. 

This  time  control  sets  the  duration  of  the  last  seg- 
ment. 

This  text  box  lets  you  specify  a destination  URL — 
for  example,  a local  page  to  be  inserted  in  a 


This  text  box  lets  you  specify  the  target  frame 
where  the  new  page  should  appear. 


Basic  f HREF  1 


HREF  Track  Inspector 
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2 With  the  Ei  REF  track  selected  in  the  Track  Editor,  go  to  the  hi  REF 
tab  of  the  El  REF  Track  Inspector  shown  above. 

3 Go  to  the  HREF  tab  of  the  El  REF  Track  Inspector  and  enter  an  URL 
(for  example,  the  folder  path  and  filename  of  a local  page  on 
your  hard  disk)  in  the  Link  text  box,  click  the  Browse...  button 
and  choosea  page  in  the  subsequent  file  selection  dialog,  or  click 
the  Point  & Shoot  button  and  drag  to  a file  or  URL  in  the  Site  Win- 
dow. 
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If  required  by  the  structure  of  your  site,  you  can  enable  the  Abso- 
lute checkbox  to  convert  the  path  to  a referenced  object  to  an 
absolute  path  (not  required  for  URLs  that  point  at  other  locations 
on  the  Web).  This  option  is  discussed  in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute  Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe  GoLive. 

4 Enter  the  name  of  the  frame  where  the  referenced  page  should 
appear  in  the  Target  text  box-tor  example,  content. 

5 Click  the  Add  button  on  the  HREF  tab  to  insert  the  first  segment. 
The  first  segment  is  as  long  as  the  movie  itself.  (If  there  is  no  other 
media  in  the  movie,  then  the  duration  defaults  to  one  second.) 
A new  segment  appears  below  the  bar  of  the  HREF  track  in  the 
main  window  area  of  the  Track  Editor. 

6 To  add  the  next  segment,  position  the  time  cursor  by  clicking  the 
up  and  down  arrows  next  to  the  Start  option  in  the  HREF  tab  of 
the  HREF  Track  Inspector. 

7 Click  the  Add  button  to  insert  another  segment  on  the  HREF 
track. 

8 Repeat  steps  3 through  7 to  add  more  HREF  tracks. 

9 You  can  click  the  last  segment  and  set  its  duration  using  the  up 
and  down  arrows  next  to  the  Duration  option,  if  desired.  (The  du- 
rations of  the  preceding  segments  can’t  be  changed.) 

10  Choose  Serve  from  the  File  menu  to  save  the  changes  to  the  Quick- 
Time™ movie. 

11  Return  to  the  document  window  and  preview  the  track  in  a 
browser. 


Like  the  chapters  of  a book,  a chapter  track  subdivides  a movie  in 
segments  that  deal  with  the  same  topic.  It  provides  basic  navigation 
support  for  QuickTime™  movies,  allowing  visitors  of  your  page  to  get 
quickly  to  selected  points  in  a movie.  When  viewed  in  a Web  browser, 
the  QuickTime™  plug-in  displays  the  chapter  track  as  a popup  menu 
in  the  standard  controller  of  the  movie. 

A good  example  for  the  use  of  a chapter  track  is  Apple  Computer’s 
1998  “Think  Different”  campaign  movie.  It  features  a series  of  per- 
sonalities in  a fast-changing  sequence  of  short  video  clips.  A chapter 
track  allows  you  to  navigate  the  movie.  By  choosing,  for  example,  “Al- 
bert Einstein”  from  the  chapter  popup  menu,  the  movie  jumps  to  the 
start  time  of  the  clip  showing  the  famous  scientist. 
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A Movie  with  a Chapter  Track  in  Adobe 
GoLive's  Movie  Viewer 


The  chapter  track  displays  as  a navigation  menu. 


Inserting  a 
Chapter  Track 


To  insert  a chapter  track,  proceed  as  follows: 

1 Open  or  create  a movie,  as  explained  in  the  section  Opening  and 
Creating  a QuickTime ™ Movie,  then  insert  any  visual  content, 
such  as  video  or  sprite  tracks. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

3 Drag  the  Chapter  Track  item  (shown  at  left)  from  the  QuickTime™ 
tab  of  the  Palette  onto  the  main  window  area  of  the  Track  Editor. 

4 This  inserts  a new  empty  track  named  Chapter  Track.  At  the  same 
time,  the  context-sensitive  Inspector  window  turns  into  the  Chap- 
ter Track  Inspector. 

5 Go  to  the  Basic  tab  of  the  Chapter  Track  Inspector,  place  the  cur- 
sor in  the  text  box  next  to  the  Chapter  Track  icon,  then  enter  a 
name  for  the  new  track. 


Using  Chapter  Tracks 
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The  Basic  Tab  of  the  Chapter  Track 
Inspector 

Click  this  tab  to  name  the  chapter  track,  view  gen- 
eral properties,  and  set  its  position  and  dimen- 
Use  this  text  box  to  name  the  chapter  track. 

Use  these  text  boxes  to  position  the  chapter  track. 

Use  these  text  boxes  to  resize  the  chapter  track. 
Use  this  checkbox  to  control  resizing  behavior. 

Use  this  text  box  to  control  the  layering  of  the 
chapter  track. 


These  text  boxes  display  general  properties. 


{ 


Chapter  Track  Inspector 


Basic  ^ Chapter 


[chapter  Track  1 


Top 


[50~ 

-Vidth  1 275  | Height  | 20 


H 


_ Layer 


~ 0 Constrain  Proportions 

EZD 


Graphics  Mode  | Dither  Copy 


Start  Time 
Duration 
Track  Type 
Data  Size 
Data  Rate 


251  Bytes 


4 Bytes /Sec 


Choose  an  option  from  the  Graphics 
Mode  popup  menu  to  specify  how 
the  HREF  track  overlays  on  other 
tracks  within  the  movie. 

The  color  field  lets  you  pick  a color 
from  the  Color  Palette  for  use  with 
the  Blend  and  Transparent  graphics 
modes  (see  page  408). 


The  fields  in  the  center  section  of  the  window  let  you  set  the  visual 
properties  of  the  chapter  track: 

- Left  and  Top:  Use  these  text  boxes  to  position  the  track  in  the 
movie. 

Width  and  Height:  Use  these  text  boxes  to  set  the  vertical  and 
horizontal  dimensions  of  the  movie  in  the  Web  page.  The  ac- 
tual size  is  determined  by  the  track  with  the  highest  width 
and  height  settings. 

Chapter  tracks  require  that  Width  beset  to  at  least  275  pixels, 
otherwise  the  navigation  popup  menu  will  not  be  visible. 

- Constrain  Proportions:  By  activating  this  checkbox,  you  force 
the  movie  to  resize  proportionally.  For  example,  when  you 
edit  the  value  in  the  Width  text  box,  Adobe  GoLive  adjusts  the 
Height  setting  automatically  to  maintain  the  original  height- 
to-width  ratio  of  the  track. 

- Layer:  Use  this  text  box  to  specify  the  layering  of  the  chapter 
track  within  the  movie.  The  lower  the  layer  number  you  en- 
ter, the  farther  to  the  front  the  chapter  appears. 

- Graphics  Mode:  Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  chapter  track  overlays  on 
other  tracks  within  the  movie.  For  a brief  description  of  the 
graphics  mode  options,  please  refer  to  page  408. 
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The  fields  at  the  bottom  are  not  user-editable: 

- Start  Time:  Displays  the  start  time  of  the  track,  which  is  usu- 
ally “time  zero”.  You  change  the  start  time  of  a track  by  click- 
ing its  bar  in  the  Track  Editor  and  dragging  it  in  the  desired 
direction. 

- Duration:  The  duration  of  the  track.  The  length  of  a chapter 
track  is  not  editable;  it  is  given  by  the  longest  track  in  the 
movie. 

Track  Type:  Shows  the  track  type,  Chapter. 

- Data  Size:  Displays  the  data  size  in  bytes. 

- Data  Rate:  This  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 


Creating  Chapters 


To  create  chapters,  proceed  as  follows: 

1 Click  the  small  triangle  control  next  to  the  track  name  in  the 
Track  Editor  to  expand  the  HREF  track. 

2 With  the  chapter  track  selected  in  the  Track  Editor,  go  to  the 
Chapter  tab  of  the  Chapter  Track  Inspector  (see  below). 

3 Click  the  New  button  to  insert  a new  chapter.  The  first  segment  is 
as  long  as  the  movie  itself.  (If  there  is  no  other  media  in  the  mov- 
ie, then  the  duration  defaults  to  one  second.) 


The  Chapter  Tab  of  the  Chapter  Track 
Inspector 

Click  this  tab  to  create  chapters. 


□ Chapter  Track  Inspector 

Basic  ( Chapter  ] 


00:00:00.00  • Apple  Computer 
00:00:00.07  • Albert  Einstein 
00:00:06.01  • Star  Wave 
00:00 :09.03  • King 


Use  this  text  box  to  name  new  chapters. 

This  time  control  sets  the  start  time  for  any  chap- 
ter, except  for  the  first  one  on  the  track. 

This  time  control  sets  the  duration  of  the  last  chap- 
ter. 


- Chapter  | John  F.  Kennedy 


( Delete  ] 


E 


Duration 


Ll 


Duration  I 00! 01! 00. 00 


B 


Set  the  start  time,  then  click  this  button  to  add 
a new  chapter. 


4  Go  to  the  Chapter  text  box  and  name  the  chapter.  As  you  type, 
you  will  notice  that  the  chapter  name  appears  in  the  controls  sec- 
tion of  the  Movie  Viewer  window. 


Using  Text  Tracks 
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5 Use  the  up  and  down  arrows  next  to  the  Start  option  to  go  to  the 
point  in  the  movie  where  you  want  the  next  chapter  to  begin.  The 
time  cursor  in  the  Track  Editor  and  the  movie  in  the  Movie  Viewer 
window  move  along  to  let  you  see  the  current  position  in  the 
movie. 

6 Click  the  New  button  to  insert  the  next  chapter. 

7 Repeat  steps  5 and  6 to  add  more  chapters  and  name  them. 

8 You  can  click  the  last  chapter  and  set  its  duration  using  the  up 
and  down  arrows  next  to  the  Duration  option,  if  desired.  (The  du- 
rations of  the  preceding  chapters  can’t  be  changed.) 

9 Go  to  the  Movie  Viewer  window  and  check  your  choices  by  choos- 
ing chapters  from  the  chapter  list.  (You  may  have  to  resize  the 
window  to  see  the  popup  menu.) 


Using  Text  Tracks  Text  tracks  display  text  within  a movie.  A typical  example  for  the  use 

of  text  tracks  is  the  subtitling  of  movies. 

Text  tracks  can  be  flexibly  subdivided  in  segments,  allowing  alterna- 
tive text  messages  to  be  displayed  during  movie  playback.  A segment 
is  a part  of  a movie  during  which  the  same  text  appears  in  the  movie 
display  area  of  the  browser.  Each  chunk  of  text  you  add  creates  a seg- 
ment of  specified  length. 

A Movie  with  a Text  Track  in  Adobe 
GoLive's  Movie  Viewer 


vie  with  a Text  Track  in  Adobe 
e's  Movie  Viewer 


The  text  track  displays  as  a subtitle. 
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Inserting  a 
Text  Track 


To  insert  a text  track,  proceed  as  follows: 

1 Open  or  create  a movie,  as  explained  in  the  section  Opening  and 
Creating  a QuickTime ™ Movie,  then  insert  any  visual  or  aural  con- 
tent, such  as  video  or  sound  tracks. 

2 In  the  Movie  Viewer  window  that  appears,  click  the  Open  Track 
Editor  button  n to  open  the  Track  Editor. 

3 Drag  the  Text  Track  item  (shown  at  left)  from  the  the  QuickTime™ 
tab  of  the  Palette  onto  the  main  window  area  of  the  Track  Editor. 

4 This  inserts  a new  empty  track  named  Text  Track.  At  the  same 
time,  the  context-sensitive  Inspector  window  turns  into  the  Text 
Track  Inspector. 

5 Go  to  the  Basic  tab  of  the  Text  Track  Inspector,  place  the  cursor  in 
the  text  box  next  to  the  Text  Track  icon,  then  enter  a name  for  the 
new  track. 


The  Basic  Tab  of  the  Text  Track  Inspector 

Use  this  text  box  to  name  the  text  track. 

Use  these  text  boxes  to  position  the  text  track. 
Use  these  text  boxes  to  resize  the  text  track. 

Use  this  checkbox  to  control  resizing  behavior. 

Use  this  text  box  to  control  the  layeri  ng  of  the  text 
track. 


These  text  boxes  display  general  properties. 


“I 


Choose  an  option  from  the  Graphics 
Mode  popup  menu  to  specify  how 
the  HREF  track  overlays  on  other 
tracks  within  the  movie. 

The  color  field  lets  you  pick  a color 
from  the  Color  Palette  for  use  with 
the  Blend  and  Transparent  graphics 
modes  (see  page  408). 


The  fields  in  the  center  section  of  the  window  let  you  set  the  visual 
properties  of  the  text  track: 

- Left  and  Top:  Use  these  text  boxes  to  position  the  track  in  the 
movie. 

Width  and  Eleight:  Use  these  text  boxes  to  set  the  vertical  and 
horizontal  dimensions  of  the  text  track. 

- Constrain  Proportions:  By  activating  this  checkbox,  you  force 
the  movie  to  resize  proportionally.  For  example,  when  you 
edit  the  value  in  the  Width  text  box,  Adobe  GoLive  adjusts  the 
Eleight  setting  automatically  to  maintain  the  original  height- 
to-width  ratio  of  the  track. 

- Layer:  Use  this  text  box  to  specify  the  layering  of  the  text  track 
within  the  movie.  The  lower  the  layer  number  you  enter,  the 
farther  to  the  front  the  text  appears. 


Using  Text  Tracks 
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The  Text  Tab  of  the  Text  Track  Inspector 


This  list  shows  the  text  segments  to  be  displayed  in 
the  movie. 


Use  this  text  box  to  type  in  the  text  to  be  inserted. 

This  time  control  sets  the  start  time  for  any  segment, 
except  for  the  first  one  on  a track. 

This  time  control  sets  the  duration  of  the  first  and 
last  segment. 


- Graphics  Mode:  Choose  an  option  from  the  Graphics  Mode 
popup  menu  to  specify  how  the  text  track  overlays  on  other 
tracks  within  the  movie.  For  a brief  description  of  the  graph- 
ics mode  options,  please  refer  to  page  408. 

The  fields  at  the  bottom  are  not  user-editable: 

- Start  Time:  Displays  the  start  time  of  the  track,  which  is  usu- 
ally “time  zero”.  You  change  the  start  time  of  a track  by  click- 
ing its  bar  in  the  Track  Editor  and  dragging  it  in  the  desired 
direction. 

- Duration:  The  duration  of  the  track.  The  length  of  a chapter 
track  is  not  editable;  it  is  given  by  the  longest  track  in  the 
movie. 

Track  Type:  Shows  the  track  type,  Chapter. 

- Data  Size:  Displays  the  data  size  in  bytes. 

- Data  Rate:  This  text  field  indicates  the  amount  of  data  avail- 
able to  be  played  every  second. 


To  create  text  segments,  proceed  as  follows: 

1 Click  the  small  triangle  control  next  to  the  track  name  in  the 
Track  Editor  to  expand  the  text  track. 

2 With  the  text  track  selected  in  the  Track  Editor,  go  to  the  Text  tab 
of  the  Text  Track  Inspector  (see  below). 


3 Type  the  desired  text  in  the  Text  text  box. 

4 Click  the  New  button  to  insert  the  first  text  segment.  Adobe 
GoLive  adds  the  new  text  to  the  segment  list  at  the  top  of  the  win- 
dow. The  first  text  segment  will  always  be  start  at  the  beginning 
of  the  timeline  and  last  as  long  as  the  longest  track  in  the  movie. 
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5 Set  the  time  during  which  you  want  the  text  to  appear  in  the 
movie  using  the  up  and  down  arrows  next  to  the  Duration  op- 
tion. 

6 To  add  the  next  text  segment  to  the  track,  position  the  time  cur- 
sor by  clicking  the  up  and  down  arrows  next  to  the  Start  option 
in  the  Text  tab,  then  repeat  steps  3 through  5. 

7 You  can  click  the  last  segment  in  the  list  and  set  its  duration  using 
the  Duration  option,  if  desired.  (The  durations  of  preceding  seg- 
ments can’t  be  changed.) 

8 Choose  Save  from  the  File  menu  to  save  the  changes  to  the  Quick- 
Time™ movie. 

9 Return  to  the  Movie  Viewer  window  and  preview  the  text  track. 
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Working  with  Frames 

This  chapter  outlines  how  HTML  frames  support 
enhances  Adobe  GoLive’s  layout  capabilities. 


General  Frames  are  a Web  design  tool  introduced  with  HTML  Version  3,  one 

of  the  major  revisions  of  the  Web  standard. 

Frames  subdivide  your  page  into  several  independent  panes  that 
helpyou  organize yourdisplay and  make  iteasierto  handle.  Because 
each  pane  displays  a separate  page,  each  page  can  be  changed  and 
scrolled  independently. 

Use  this  feature  if  you  want  to  enhance  your  page  with  an  on-screen 
navigation  aid  that  remains  visible  whilethe  userscrollsthrough  the 
main  window.  This  is  best  achieved  by  placing  a table  of  contents 
consisting  of  hyperlinks  on  a sidebar  (see  example  below). 


Frames  Viewed  with 
Netscape  Navigator  4 


This  sidebar  does  not  scroll  with  the  rest  of  the 
main  window.  It  is  visible  all  the  time. 


The  user  can  scroll  the  main  window. 


By  displaying  this  table  of  contents  on  other  pages,  you  can  create  an 
easily  navigable  site  with  a consistent  page  layout. 
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Working  with  Frames 


This  chapter  covers  the  following  general  topics  and  specific  fea- 
tures: 

• The  Things  to  Know  About  Frames  section  (see  page  430)  intro- 
duces to  the  concept  of  HTML  frames  and  addresses  common 
problems. 

• The  Editing  Frames  in  Adobe  GoLive  section  (see  page  432) 
explains  the  most  important  features  of  Adobe  GoLive’s  frame 
editing  environment. 

• Inserting  Frames  (see  page  434)  tells  you  how  to  build  a page 
using  an  HTML  frame  set  with  embedded  frames. 

• The  Setting  Up  Frames  section  (see  page  434)  teaches  how  to  size 
HTML  frames  and  adjust  their  basic  display  attributes. 

• Moving  Frames  (see  page  436)  describes  how  to  move  and  rear- 
range frames  within  a frame  set. 

• Drag  & Drop  Editing  of  Frame  Content  (see  page  437)  details  how 
you  can  use  drag  & drop  to  specify  frame  content. 

• Previewing  Frames  (see  page  438)  describes  how  to  use  display 
previews  of  HTML  pages  in  the  Frames  view  and  the  dedicated 
Frame  Preview  tab. 

• The  Example  Frame  Sets  section  (see  page  440)  contains  a simple 
frames  example. 


The  following  section  discusses  a few  things  you  need  to  know  before 
you  start  working  with  frames. 

Frames  in  a Nutshell 

The  most  important  thing  to  notice  is  the  difference  between  frame 
sets  and  frames.  A frame  set  is  a master  document  containing  just  a 
minimum  of  HTML  code,  including  a title,  as  well  as  definitions  of 
the  size,  arrangement,  and  URLs  that  address  the  content  of  its 
panes.  The  panes  in  a frame  set  are  called  frames.  Their  content  is 
provided  by  component  documents  that  may  contain  text  and  full- 
scale  HTML  formatting.  Consequently,  it  takes  a minimum  of  three 
HTML  pages  to  implement  a two-frame  set:  one  page  for  the  frame 
set  and  two  more  pages  for  its  visible  content. 


Things  to  Know  About  Frames 
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The  following  graphic  illustrates  the  structure  of  a framed  page. 


Frames  are  a design  tool  for  the  experienced  Web  author.  Beginners 
can  use  frames,  too,  but  when  they  do,  they  are  well-advised  to  keep 
the  structure  simple  at  all  times.  The  two-frame  set  shown  above  is 
such  a straightforward  design:  It  consists  of  a non-scrolling  naviga- 
tion bar  and  a scrolling  content  area. 

There  are  a few  pitfalls  in  using  frames  because  of  browser  limita- 
tions. Things  to  avoid  include: 

• Single-frame  pages:  You  should  avoid  using  single-frame  pages. 
They  do  not  display  in  Netscape’s  Navigator  and  Communicator 
browsers. 

• Browser  offset:  Browsers  tend  to  offset  the  content  of  a page  by  a 
few  pixels  from  the  edge  their  main  display  area — and  the  inner 
edges  of  frames.  This  behavior  can  cause  sizing  problems. 

• Nestingframe sets:  Although  HTML  specifies  the  nesting  of  frame 
sets  within  frame  sets,  refrain  from  using  this  feature  because  it 
can  cause  serious  navigation  problems.  By  subdividing  the 
browser  in  multiple  frames,  you  also  reduce  the  display  area  for 
content. 
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The  Frames  Editor  View 

To  use  frames,  switch  to  Adobe  GoLive’s  Frames  Editor  view  and  open 
the  Frames  tab  of  the  Palette. 

The  screenshot  below  shows  the  Adobe  GoLive  document  window 
while  the  program  is  in  the  Frames  Editor  view. 


Icons  represent  the  pages  displayed  in  the  indi- 
vidual panes. 


Click  this  separator  to  select  the  frame  set  or  drag 
it  to  resize  frames  relative  to  each  other. 


The  Frames  Tab  of  the  Palette 


Editing  Frames  in 
Adobe  GoLive 


The  Frames  Editor  View 

Click  here  to  switch  to  the  Frames  Editorvi- 
The  name  of  the  frame  is  displayed  here. 


The  Frames  Tab  of  the  Palette 


The  Frames  tab  contains  a large  selection  of  different  frame  sets  to 
choose  from,  each  ready  for  drag  & drop  insertion. 


To  insert  a frame  set,  proceed  as  follows: 

1 Select  a frame  configuration  from  the  Palette. 

2 Drag  it  onto  your  document  window. 

3 Edit  its  attributes  (see  below). 


Editing  Frames  in  Adobe  GoLive 
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The  Frame  Set  Inspector 

The  context-sensitive  Frame  Set  Inspector  lets  you  select  the  orienta- 
tion of  the  borders  within  the  frame  set  and  establish  their  appear- 
ance. 

Two  buttons,  Preview  Set  and  Stop  Preview,  in  the  Frame  Set  Inspector 
allow  the  user  to  toggle  previewing  of  the  frame  set  on  and  off. 


The  Frame  Set  Inspector 

The  Size  text  box  is  disabled  because  a frame  set 
cannot  have  an  absolute  size. 

Click  either  radio  button  to  flip  the  frame  set. 
Use  these  options  to  set  the  border  properties. 


□ 


Size 

Orientation 


{ 


Frame  Set  Inspector g 

die 

O Horizontal  ^ Vertical 

0 BorderSize  |6  "*j 

1 I BorderColor 
I I BorderFrame 


Use  these  buttons  to  toggle  previewing  of  the 
frame  content  on  and  off. 


{ 


| ► | Preview  Set 
| * | Stop  Preview 


r 


Instructions  for  setting  frame  set  options  are  given  later  in  this  chap- 
ter. 


The  Frame  Inspector 


The  context-sensitive  Frame  Inspector  lets  you  resize  and  name  indi- 
vidual frames,  link  them  with  the  pages  to  be  displayed,  and  set  their 
scrolling  and  resizing  properties. 

A Preview  Frame  button  in  the  Frame  Inspector  allows  the  user  to  tog- 
gle content  previewing  on  and  off  for  the  current  selection.  This  fea- 
ture is  especially  useful  when  the  content  of  a particular  frame  takes 
a long  time  to  load. 


The  Frame  Inspector 

Place  the  cursor  in  the  Size  text  box  and  type  in  a 
numerical  value  to  resize  the  frame. 

Place  the  cursor  in  the  Name  text  box  and  type  in 
a name  for  the  frame. 

Type  in  the  URL  for  the  desired  content  here, 
click  Browse  to  select  a URL,  or  click  the  Point  & 
Shoot  button  to  link  to  one. 

Use  these  options  to  set  the  scrolling  properties 
and  enable  resizing  of  the  frame. 


Use  this  option  to  toggle  previewing  on  and  off 
for  the  selected  frame. 


Frame  Inspector 


I 


Size 

Name 

URL 


l|3°  in 


|p-3ge6.htm^ 


[~j~l  Absolute  | Browse—  j 


Scrolling  | Auto  $ ] 
0 Resize  Frame 

~\  ► | Previev  Frame 


This  checkbox  converts  the  path 
to  the  referenced  page  to  an  ab- 
solute path.  This  option  is  dis- 
cussed in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe 
GoLive. 


Instructions  for  setting  frame  options  appear  later  in  this  chapter. 
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Inserting  a Frame  Set 


Adobe  GoLive  lets  you  insert  frames  and  frame  sets  via  drag  & drop. 
To  insert  a frame  or  frame  set,  proceed  as  follows: 

1 Switch  to  the  Frames  Editor  view  in  the  Palette  by  clicking  on  the 
Frames  tab. 

2 Drag  the  desired  icon  from  the  Palette  and  drop  it  in  your  docu- 
ment window. 


Setting  Up  Frames  Adobe  GoLive  uses  the  Frame  Set  Inspector  and  Frame  Inspector 

shown  on  page  433  to  help  you  set  up  frame  sets  and  frames. 

To  set  up  the  frame  set,  proceed  as  follows: 

1 Select  the  frame  set  by  clicking  any  of  its  horizontal  or  vertical  di- 
viders. 

2 Go  to  the  Frame  Set  Inspector  to  view  the  frame  set  options: 

- The  Size  text  box  is  disabled  because  a frame  set  cannot  have 
an  absolute  size. 

- Click  any  of  the  Orientation  radio  buttons  to  arrange  the  di- 
viders in  the  frame  set  horizontally  or  vertically.  Note  that  the 
border  line  will  be  hidden  in  the  browsers. 

- To  resize  that  border,  you  can  click  any  divider,  select  the  Bor- 
der Size  checkbox,  and  type  in  a value  in  pixels.  Setting  Border 
Frame  to  No  and  Border  Size  to  “0"  hides  the  selected  divider. 

- To  assign  a color  to  all  dividers  in  the  frame  set,  you  can  click 
any  divider,  select  the  Border  Color  checkbox,  then  drag  a col- 
or from  the  Color  Palette  onto  the  Border  Color  color  field. 
This  color  overrides  the  gray  border  that  most  Web  browsers 
default  to. 
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You  cannot  select  a background  color  for  a frame  or  frame  set. 
To  color  the  background  of  a frame,  select  a background  color 
for  the  page  you  want  to  display  in  that  frame. 

3 When  you  finish  setting  options,  click  the  Preview  Set  button  in 
the  Frame  Set  Inspector  to  enable  previewing.  Click  the  Stop  Pre- 
view button  to  turn  off  previewing  again. 

To  set  up  a selected  frame,  proceed  as  follows: 

1 Click  to  select  the  frame. 

2 Go  to  the  Frame  Set  Inspector  and  edit  the  size  options  for  the  se- 
lected frame: 

If  you  don’t  want  the  frame  to  be  resizable — for  example,  if 
it  is  supposed  to  display  a small  image  of  known  dimen- 
sions— choose  Pixel  from  the  Size  popup  menu,  then  use  the 
Size  text  box  to  preset  an  absolute  size  in  pixels.  Please  note 
that  when  specifying  an  absolute  size  in  pixels  for  one  frame, 
you  need  to  set  at  least  one  more  frame  with  the  same  orien- 
tation to  Scale,  or  the  frame  set  will  scale  all  frames  in  that  di- 
rection. 

If  you  want  the  frame  to  take  on  a fixed  ratio  relative  to  the 
overall  height  or  width  of  the  frame  set,  choose  Percent  from 
the  Size  popup  menu,  then  use  the  Size  text  box  to  preset  a 
percentage.  For  frames  with  horizontal  orientation,  this  at- 
tribute controls  the  relative  height.  For  frames  with  vertical 
orientation,  it  controls  the  relative  width. 

- The  default  Scale  option  sizes  the  frame  automatically  when 
the  visitor  resizes  the  browser’s  window. 

3 Place  the  cursor  in  the  Name  text  box  and  type  in  a name  for  the 
frame.  Note  that  you  must  name  the  frame. 

4 Click  the  Point  & Shoot  button  to  drag  a link  to  a page  in  the  Site 
Window  or  to  the  small  document  icon  next  to  the  title  of  the  tar- 
get document. 

Alternatively,  you  can  type  in  the  desired  file  name  in  the  URL  text 
box,  click  the  Browse  button  to  choose  a Web  page  in  the  subsequent 
file  selection  dialog,  or  specify  frame  content  via  drag  & drop  (see 
page  437). 

5 Select  an  option  from  the  Scrolling  popup  menu: 

- Auto  will  hide  the  scrollbar  if  it  isn’t  needed  and  automatical- 
ly show  it  if  the  content  is  too  large  to  fit. 

Yes  will  show  the  scrollbar  even  if  it  isn’t  needed. 
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- No  will  hide  the  scrollbar  even  if  it  is  needed. 

6 Click  the  Preview  Frame  button  to  toggle  previewing  on  or  off  for 
the  current  frame. 

Viewing  Referenced  Documents  in  the  Size  of  Their  Frame 

To  view  a document  in  a window  that  is  the  same  size  as  its  frame, 
double-click  the  document  icon  in  the  Frames  Editor  view. 


Moving  Frames  The  Frames  Editor  view  lets  the  user  rearrange  the  page  layout  with  ut- 

most ease.  You  can  drag  frames  around  the  frame  set  and  drop  them  at 
any  desired  location  or,  if  you  are  an  experienced  user,  rearrange  nested 
frame  sets. 


To  move  a frame  via  drag  & drop,  proceed  as  follows: 

1 Click  the  frame  you  want  to  move  and  start  dragging. 

As  you  drag,  you’ll  notice  that  frame  orientation  limits  the  direc- 
tion of  motion:  You  can  drag  vertical  frames  sideways  and  hori- 
zontal frames  up  and  down,  but  you  cannot  extend  the  frame  set 
by  dragging  beyond  its  boundaries. 

2 Drop  the  frame  at  the  desired  location  and  watch  Adobe  GoLive 
rearrange  the  page  layout  in  real  time. 


To  rearrange  nested  frame  sets  via  drag  & drop,  proceed  as  follows: 


Drag  & Drop  Editing  of  Frame  Content 
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1 Control-click  the  divider  of  the  nested  frame  set  you  want  to 
move  and  start  dragging. 

As  you  drag,  note  that  the  frame  set  orientation  limits  the  direc- 
tion of  motion:  You  can  drag  vertical  frame  sets  sideways  and 
horizontal  frame  sets  up  and  down,  but  you  cannot  extend  the 
master  frame  set  by  dragging  beyond  its  boundaries. 

2 Drop  the  frame  set  at  the  desired  location  within  the  master 
frame  set  and  watch  Adobe  GoLive  rearrange  the  page  layout  in 
real  time. 


Drag  & Drop  Editing 
of  Frame  Content 


Adobe  GoLive’s  frame  editing  functionality  lets  you  do  far  more  than 
move  frames  around.  The  Frames  Editor  view  provides  even  more 
comprehensive  drag  & drop  support,  enhancing  Adobe  GoLive’s 
powerful  frame  editing  environment. 

Two  alternative  drag  & drop  methods  let  you  specify  frame  content 
with  ultimate  ease: 

• You  can  drag  files  and  URLs  from  the  5/Ye  Window  and  drop 
them  onto  frames. 

• You  can  drag  files  from  the  Macintosh  Finder  and  drop  them 
directly  onto  frames. 

The  illustration  below  shows  how  you  can  use  drag  & drop  to  insert 
an  HTML  page  from  the  Site  Window. 
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To  specify  frame  content  via  drag  & drop,  proceed  as  follows: 

1 Select  the  resource  you  want  to  display  in  the  frame  and  start 
dragging.  You  can  use  the  items  listed  below  from  the  following 
sources: 

HTML  pages  from  the  Files  tab  of  the  Site  Window 

URLs  from  the  URL  tab  of  the  Site  Window  ( by  using  URLs,  you 
can  reference  resources  on  remote  volumes  or  servers) 

HTML  pages  from  the  Macintosh  Finder 

2 Drop  the  object  at  the  desired  location.  When  you  enable  the  Pre- 
view or  Preview  Frame  option  (see  the  section  Previewing  FtTML 
Pages  in  the  Frames  View  on  page  439),  Adobe  GoLive  will  visually 
display  the  page,  provided  that  it  is  locally  available  on  your  hard 
disk.  Referenced  pages  from  other  Web  sites  can  only  be  dis- 
played in  the  browser. 


Previewing  Frames  The  Frame  Preview  Tab 

Adedicated  Frame  Preview  tab  in  the  main  document  windowallows 
for  instant  “browserless”  previewing.  Similar  to  what  the  Preview  tab 
does  for  normal  HTML  pages,  the  Frame  Preview  shows  a near-life 
representation  of  a page  with  HTML  frames. 


The  Frames  Preview 


Click  this  tab  rider  to  open  the  Frames  Preview 
window. 


Previewing  Frames 
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To  preview  a page  with  HTML  frames,  proceed  as  follows: 

1 From  within  the  Frames  view,  click  the  Frames  view  tab  to  open 
the  Frames  Preview. 

2 To  return  to  the  frame  editing  mode,  click  the  Frames  tab. 


Please  note  that  this  preview-only  mode  does  not  support  edit- 
ing. Double-clicking  individual  frames  or  dropping  pages  or 
URLs  does  not  have  any  effect. 


Previewing  HTML  Pages  in  the  Frames  View 

You  can  display  a preview  of  the  frame  content  directly  in  the  Frames 
view,  without  a browser.  This  feature  enables  users  to  review  their 
page  layout  continually,  without  launching  a browser  for  preview- 
ing. You  can  make  corrections  on  the  spot  by  double-clicking  the 
frame  content  or  importing  an  alternative  page  via  drag  & drop. 


Previewing  Turned  On  and  Off 


Previewing  has  been  disabled  for  this  frame. 


Previewing  has  been  enabled  for  this  frame. 


Controls  in  the  Frame  Inspector  and  Frame  Set  Inspector  allow  for  se- 
lectively previewing  individual  frames  (see  example  above)  or  the 
entire  frame  set,  depending  on  the  current  selection. 
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This  section  describes  how  to  create  a simple  frames  sample. 

To  create  a frame  set,  proceed  as  follows: 

1 Create  two  simple  HTML  pages  first.  Save  the  first  as  “Naviga- 
tor.html”;  it  will  be  used  for  the  left  frame.  Name  the  second 
page  “Bodypage.html”;  it  will  be  displayed  at  the  content  section 
to  the  right. 

2 Create  a new  page,  switch  to  the  Frames  Editor,  and  drag  a simple 
frame  set  from  the  Palette  to  the  window. 


FrameSet  for  Example 

Layout  |T3  [ f~H  j_  Source  m ) nn  | nn  ] p~ 


SB 


□ f El 


Example  Frame  Sets 
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3  Use  the  Inspector  to  tune  each  frame.  Name  the  right  frame 
“Body-Frame”.  Label  the  left  frame  “Navigator-Frame”.  The  URL 
should  refer  to  the  HTML  page  “Navigator.html”  created  at  step  1. 


□ i Navi  gator. h = 0@ 
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Navigator-Frame 
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4 Open  the  page  “Navigator.html”.  Edit  each  link  and  set  the  Target 
to  “Body-Frame”.  This  determines  that  the  destination  will  ap- 
pear at  the  right  frame. 

The  Target  popup  offers  the  standard  values_fop,  _parent,  _self 
mA_blank\  your  additional  values  Navigator-Frame  and  Body- 
Frame  are  available,  too. 

5 Test  your  frames  page  in  your  desired  browser. 

Here’s  what  the  default  values  do: 


_top:  Loads  the  link  into  the  full  Web  browser  window,  re- 
placing the  current  <frame  set>  entirely.  If  the  current  doc- 
ument is  already  at  the  top,  the  target  _self  will  be  used. 

_parent:  Loads  the  link  into  the  <frame  set>  parent  of  the 
current  document.  If  the  current  document  has  no  parent, 
the  target  _self  will  be  used. 

_self\  Loads  the  document  referenced  by  the  link  tag  into  the 
window  or  frame  that  held  the  link  tag. 

_blank\  Loads  the  document  referenced  by  the  link  tag  into  a 
new  “unnamed”  window. 


You  can  also  use  external  links  at  the  navigation  section.  See  what 
happens  if  you  use  one  and  target  it  to  the  “Body-Frame.” 
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More  settings  for  the  Frame  and  Frame  Set  Inspectors  are  explained 
earlier  in  this  chapter. 
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Please  note  that  Adobe  GoLive  cannot  display  external  URLs. 
You  need  to  test  external  links  with  a browser. 
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A Simple  Form  in  Preview  Modeon  a 
Layout  Grid 


Working  with  Forms 

This  chapter  introduces  you  to  Adobe  GoLive’s  compre- 
hensive set  of  form  building  tools,  outlining  their  use  in 
simple  step-by-step  instructions. 


To  assist  you  in  building  fully  functional  the  visual  component  of 
HTML  forms,  Adobe  GoLive  offers  a complete  inventory  of  forms  ob- 
jects, ready  for  easy  drag  & drop  insertion  from  the  Forms  tab  of  the 
Palette.  Adobe  GoLive  forms  elements  fully  support  the  upcoming 
HTML  4.0  standard,  including  advanced  features  such  as  labels  and 
navigation  through  tabbing  or  access  keys,  as  well  as  structuring 
through  field  sets  and  legends — without  compromising  downward- 
compatibility  with  the  present  HTML  3.2  specification. 
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Forms  provide  a means  of  interacting  with  your  audience.  You  can 
collect  data  about  and  receive  feedback  from  people  visiting  your 
site,  secure  selected  pages  through  password  protection,  customize 
the  appearance  and  content  of  pages  based  on  user  input,  and  let 
users  enter  search  criteria  for  database  queries. 
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Building  the  “Visual 
Component”  of  Forms 

The  Forms  Tab  of  the  Palette 

Click  this  tab  rider  to  open  the  Forms  tab. 


Using  Forms  Tags 


Working  with  Forms 


To  process  the  information  the  user  enters  in  a form,  you  need  a 
Common  Gateway  Interface  (CGI)  program.  CGIs  reside  on  the  Web 
server,  where  they  manage  the  flow  of  information  from  the  audi- 
ence back  to  the  content  provider. 

CGIs  format  the  data  that  the  user  submits  for  import  into  a database 
orautomaticallyjumptoanother  page  if  the  userentersa  password. 
CGIs  are  controlled  by  scripts  written  in  AppleScript,  MacPerl,  C++, 
or  script  languages  for  other  platforms.  If  you  are  not  familiar  with 
CGI  scripting,  ask  your  Web  master  for  assistance  or  for  existing 
scripts  that  you  can  modify  to  meet  your  requirements  for  processing 
forms. 


Adobe  GoLive  lets  you  build  the  visual  side  of  HTML  forms  for  the 
Web  with  accuracy  and  ease.  The  Forms  tab  of  the  Palette  contains  all 
the  FITML  tags  you  need. 


To  insert  forms  tags,  proceed  as  follows: 

1 Click  on  the  Forms  tab  rider  to  open  the  Forms  tab  of  the  Palette. 

2 Insert  a Form  tag  (the  first  icon  in  the  first  row;  see  page  447)  by 
dragging  the  icon  to  the  document  window  or  double-clicking  it. 
This  tag  is  a marker  that  indicates  the  beginning  of  a form.  It  in- 
structs the  browser  to  regard  everything  that  follows  as  a fill-in 
form,  which  can  be  returned  to  the  server  when  the  visitor  clicks 
the  Submit  button. 

3 You  can  now  start  building  forms  by  inserting  forms  elements 
from  the  Palette  using  drag  & drop  below  the  Form  element  in- 
serted in  step  2 above.  Or  double-click  an  icon  in  the  Palette  to 
insert  a forms  element  at  the  current  cursor  location. 


The  Form  Element 
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The  following  pages  describe  the  individual  form  objects,  along  with 
step-by-step  instructions  on  how  to  use  them. 


The  Form  Element  The  Form  tag  identifies  the  current  page  or  section  as  a form  and  in- 

structs the  browser  where  and  how  to  return  form  information  for 
processing. 


Inserting  a Form  Tag 


The  Form  element  is  a essential  in  order  for  your  form  to  dis- 
play without  errors  in  the  Netscape  Navigator  and  Netscape 
Communicator  browsers.  When  designing  forms,  you  must 
place  any  element  you  want  to  include  in  a form  below  this  el- 
ement (see  page  450  for  an  example). 


To  insert  a Form  tag,  proceed  as  follows: 

1 Drag  the  Form  tag  icon  from  the  Palette  and  drop  it  in  your  layout 
grid  ordocument  window  (or  double-click  the  icon  in  the  Palette). 
An  icon  with  the  letter  “F”  A box-like  symbol  will  appear  on  your 
grid  or  in  your  document  window. 
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2 Set  up  the  form  in  the  context-sensitive  Inspector  window,  now  ti- 
tled Form  Inspector. 
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The  Form  Inspector 


Type  in  a name  for  the  form  here. 

Type  in  the  destination  URL  for  the  form’s  out- 
put here,  click  Browse  to  select  an  URL,  or  click 
the  Point  & Shoot  button  to  link  to  one.  (This  is 
usually  the  location  of  the  CGI  script,  as  speci- 
fied by  your  ISP.) 

Select  a target  location  for  the  form  output. 

Use  default  encryption  or  select  an  encryption 
method  from  the  popup  menu. 

Select  a method  for  the  form  to  return  its  infor- 
mation to  the  CGI  script. 


This  checkbox  converts  the  path 
to  the  referenced  CGI  script  to  an 
absolute  path.  This  option  is  dis- 
cussed in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe 
GoLive. 


The  Form  Inspector  lets  you  set  the  following  options: 

1  Use  the  Name  text  box  to  give  a unique  name  to  your  form. 


Naming  the  form  is  especially  important  if  you  have  more  than 
one  form  on  the  page.  Also,  it  eases  CGI  scripting  if  each  form 
throughout  your  site  can  be  identified  by  a unique  name. 


2 Use  the  Encrypt  popup  menu  to  select  an  encryption  method. 

3 Use  the  Action  text  box  to  enter  the  directory  and  file  name  of  the 
CGI  script  or  E-mail  address  you  want  the  form  information  sent 
to  when  the  user  clicks  the  Submit  button. 

Alternatively,  click  the  Browse  button  and  select  a destination  in  the 
subsequent  file  selection  dialog,  or  click  the  Point  & Shoot  button  to 
link  to  a CGI  script  in  the  Site  window. 

4 Choose  a target  location  in  the  destination  URL  from  the  Target 
popup  menu. 

5 If  your  form  is  embedded  in  a frame  set  and  you  want  to  control 
where  the  HTM L page  returned  by  the  CGI  appears  after  the  user 
has  submitted  the  form,  choose  a target  location  from  the  Target 
popup  menu.  Besides  the  names  you  have  given  to  individual 
frames  within  a frame  set,  the  following  default  options  appear: 

- Tbe_blank  option  loads  the  page  into  a new  unnamed  win- 
dow. 

- The_se//option  loads  the  page  into  the  window  or  frame  that 
previously  held  the  form. 


The  Form  Element 
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- The _parent  option  loads  the  page  into  the  parent  frame  set 
of  the  form. 

- The_fop  option  loads  the  page  into  the  full  browser  window, 
replacing  any  current  frame  sets. 

6 Use  the  Encrypt  popup  menu  to  select  an  encryption  method. 

7 Use  the  Method  popup  menu  to  determine  how  to  send  the  form 

information: 

- Post  includes  the  data  entered  by  the  visitor  information  sep- 
arately from  the  destination  URLinto  the  body  of  the  form 
and  returns  the  result  to  the  CGI. 

- Get  appends  the  data  entered  by  the  visitor  to  the  file  speci- 
fied in  the  Action  text  boxform  information  to  the  destination 
URL. 

- Default  omits  the  Method  attribute. 

We  recommend  using  the  Post  option  because  URLs  have  a def- 
inite length  that  might  be  exceeded  by  simply  appending  infor- 
mation to  the  destination  file.  This  could  cause  data  loss. 

The  form  is  now  ready  to  accept  content.  An  example  of  how  the  con- 
tent of  a form  is  arranged  with  accuracy  appears  on  the  next  page. 
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The  following  screenshot  illustrates  how  you  can  add  content  to  a 
form.  The  form  shown  here  uses  an  HTML  table  to  structure  the  visu- 
al presentation  in  the  browser.  Forms  elements  are  placed  in  table 
cells  to  ensure  that  they  display  without  any  spacing  problems  in  all 
popular  browsers. 


A Simple  Form  Viewed  in  Layout  Modeon 
a Layout  Grid 


All  elements  of  a fill-in  form  must  be  arranged 
below  the  form  element  in  order  to  be  included 
in  the  form. 


Tables  are  the  preferable  tool  for  structuring  fill- 
in  forms. 


Individual  forms  elements  can  be  conveniently 
placed  in  table  cells  via  drag  & drop. 


Every  browser  and  every  platform  render  forms  elements  dif- 
ferently, both  in  terms  of  outer  appearance  and  size.  There  is 
no  Web  authoring  tool  that  lets  you  design  fill-in  forms  for  the 
Web  that  look  the  same  across  platforms. 

With  Adobe  GoLive,  however,  you  will  obtain  predictable  re- 
sults if  you  use  HTML  tables  rather  than  layout  grids  ora  simple 
flow  of  HTML  for  structuring  fill-in  forms.  Also,  to  account  for 
the  fact  that  some  browsers  render  forms  larger  by  as  much  as 
50  percent,  don’t  group  your  elements  too  tightly.  If  you  use 
HTML  tables,  increase  the  height  of  the  rows  and  width  of  the 
cells  by  a deliberate  amount  and  test-view  your  forms  fre- 
quently on  all  targeted  browsers. 


Basic  Forms  Tags 
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Basic  Forms  Tags  The  following  sections  list  the  HTML  3.2  buttons  and  forms  objects 

available  on  Adobe  GoLive’s  Palette. 

Besides  the  Form  tag,  which  acts  as  a “container”,  there  areThe  HTML 
3.2  standard  specifies  three  basic  categories  of  forms  objects: 

• buttons,  including  radio  buttons  and  checkboxes 

• fields,  including  text  fields,  scrolling  text  areas,  and  password 
fields 

• popup  menus,  including  scrolling  dialog  boxes 

The  section  FITML  4.0  Forms  Fags  and  Features,  starting  on  page  469, 
describes  additional  elements  that  the  advent  of  HTML4.0  will  intro- 
duce. 


Submit  Button 


Inserting  a Submit  Button 


Th e Submit  Button  icon  inserts  a default  button  labeled  Submit  that 
sends  the  current  data  entered  in  the  form  to  the  CGI  for  processing. 

To  insert  a Submit  Button,  proceed  as  follows: 

1 Drag  the  Submit  Button  icon  from  the  Palette  and  drop  it  in  your 
layout  grid  or  document  window  (or  double-click  the  icon  in  the 
Palette). 


Submit  Query 


2 Set  up  the  Submit  Button  in  the  context-sensitive  Inspector  win- 
dow, now  titled  Form  Button  Inspector. 
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The  Form  Button  Inspector 


Click  the  appropriate  button  to  select  another 
function. 


Type  in  a unique  name  for  the  button  here. 

Check  the  Label  checkbox  and  type  in  a custom 
button  label  here. 


□ Form  Button  Inspector g 

— Properties 

— Button  If!1  Submit 

Q Reset 
O Normal 

— Name 
0 Label 

— Focus  - 

□ Tab  io  ! HI  I Access  key  [ 
l~1  Disabled 


Submit  Button  Formal 


Send 


Set  the  following  options  in  the  Properties  section  of  the  Form  Button 
Inspector: 

• If  you  need  a custom  button,  usellse  the  Name  text  box  to  give 
the  button  it  a unique  name. 

Do  not  use  Submit  or  Reset ! These  names  are  reserved. 

• Check  the  Label  checkbox  and  type  in  the  button  label  you  want 
the  audience  to  see — for  example,  Send  instead  of  Submit.  The 
label  will  be  immediately  updated  on  your  screen. 

• To  define  a custom  button,  click  the  Normal  radio  button. 

The  Form  Navigation  Support  section,  starting  on  page  470.,  explains 
the  options  in  the  Focus  section  of  the  Inspector  window. 


Reset  Button 


The  Reset  Button  icon  inserts  a default  button  labeled  Reset  that 
clears  the  current  data,  resetting  the  form  to  its  default  values. 

To  insert  a Reset  Button,  proceed  as  follows: 

1 Drag  the  Reset  Button  icon  from  the  Palette  and  drop  it  in  your 
form  layout  grid  or  document  window(or  double-click  the  icon 
in  the  Palette). 
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Inserting  a Reset  Button 


The  Form  Button  Inspector 

Click  the  appropriate  button  to  select  another 
function. 


Check  the  Label  checkbox  and  type  in  a custom 
button  label  here. 


2 Set  up  the  Reset  Button  in  the  context-sensitive  Inspector  window, 
now  titled  Form  Button  Inspector. 

□ Form  Button  Inspector @ 

Properties 

— Button  O Submit 

Reset 
O Normal 

Name  ^ButtonName 

— LI  Label 
Focus 

□ Tab  o I [10  □ 

I I Disabled 

r 


Set  the  following  options  in  the  Properties  section  of  the  Form  Button 
Inspector: 

• Check  the  Label  checkbox  and  type  in  the  button  label  you  want 
the  audience  to  see — for  example,  Clear  instead  of  Reset.  The 
label  will  be  immediately  updated  on  your  screen. 

• To  define  a custom  button,  click  the  Normal  radio  button. 

The  section  Form  Navigation  Support,  startingon  page  470,  discusses 
the  options  in  the  Focus  section  of  the  Inspector  window. 
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Radio  Button 


The  Radio  Button  icon  inserts  a radio  button  that  lets  the  sitevisitors 
select  only  one  item  from  a list.  To  enable  the  selection  to  work  prop- 
erly, the  Inspector  lets  you  create  logical  groups  of  complementary 
radio  buttons. 

To  insert  a Radio  Button,  proceed  as  follows: 

1 Drag  several  Radio  Button  icons  from  the  Palette  and  drop  them 
on  your  layout  grid  or  document  window. 


Inserting  a Radio  Button 


o 

2 Set  up  the  Radio  Button  in  the  context-sensitive  Inspector  mn- 
dow,  now  titled  Form  Radio  Button  Inspector. 

The  Form  Radio  Button  Inspector 


Type  in  a new  logical  group  name  or  select  one 
from  the  popup  menu. 

Type  in  an  optional  value  for  the  radio  button 


Form  Radio  Button  Inspector 


Properties 
— Group  I Pay  Group 


Value  | MC  Button 

— Focus 

□ Tab  jo 
I I Disabled 
-FI  Selected 


IS) 


I ii  I Q 


Check  this  checkbox  to  use  the  button  as  the  de- 
fault selection. 
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Set  the  following  options  in  the  Properties  section  of  the  Form  Radio 

Button  Inspector: 

1 In  the  Group  text  box,  type  in  a new  logical  group  name  or  select 
an  existing  group  name  from  the  popup  menu. 

2 In  the  Value  text  box,  type  in  a value  or  an  additional  descriptive 
name  for  the  radio  button  to  identify  it  as  an  entity  within  the 
group.  When  the  visitor  clicks  the  Submit  button  in  the  form,  this 
value  will  be  passed  to  the  CGI  script  to  indicate  the  selection  of 
this  button. 

3 Additionally,  in  the  Focus  section,  check  the  Selected  checkbox  to 
let  the  radio  button  default  to  selected. 

4 Place  the  appropriate  text  beside  each  button.  Repeat  steps  21 
through  43  for  each  button  in  the  group. 

The  Form  Navigation  Support  section,  beginningon  page  470, explains 

the  options  in  the  Focus  section  of  the  Inspector  window. 


Check  Box 


The  Checkbox  icon  inserts  a checkbox  that  lets  the  user  select  multi- 
ple items  from  a list. 

To  insert  a checkbox,  proceed  as  follows: 

1 Drag  the  checkbox  icon  from  the  Palette  and  drop  it  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 


Inserting  a checkbox 
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2 Set  up  the  checkbox  in  the  context-sensitive  Inspector  window, 
now  titled  Form  Check  Box  Inspector. 


The  Form  Check  Box  Inspector 

□ Form  Check  Box  Inspector  § 

Type  in  a unique  name  for  the  checkbox  here.  

Type  in  an  optional  value  for  the  checkbox  here. 

— Name  | Checkbox  *1 

— Value  | CheckboxValue 

Check  this  checkbox  to  use  the  button  as  a de- 
fault selection. 

□ Tab  jo  I [S]  Key  [“ | 

1 1 Disabled 
El  Selected 

m 

Set  the  following  options  in  the  Properties  section  of  the  Form  Check- 

Box  Inspector: 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the 
checkbox  as  an  entity. 

• In  the  Value  text  box,  type  in  a descriptive  name  for  the  check- 
box. When  the  visitor  clicks  the  Submit  button  in  the  form,  this 
value  will  be  passed  to  the  CGI  script  to  indicate  the  selection  of 
this  option. 

• Additionally,  in  the  Focus  section,  check  the  Is  Selected  checkbox 
to  make  the  checkbox  default  to  selected. 

The  section  Form  Navigation  Support,  starting  on  page  470,  covers  the 

options  in  the  Focus  section  of  the  Inspector  window. 


Text  Field 


The  Text  Field  icon  inserts  a single-line  text  field  that  lets  site  visitors 
enter  text — for  example,  their  names  or  other  personal  data. 

To  insert  a text  field,  proceed  as  follows: 

1 Drag  the  Text  Field  icon  from  the  Palette  and  drop  it  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 
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Inserting  a Text  Field 


2 Set  up  the  text  field  in  the  context-sensitive  Inspector  window, 
now  titled  Form  Text  Field  Inspector. 


The  Form  Text  Field  Inspector 


Type  in  a unique  name  for  the  text  field  here. 
Type  in  a default  text  entry  here. 


Type  in  a numerical  value  to  determine  the 
length  of  the  field. 

Type  in  a numerical  value  to  determine  the  max- 
imum length  of  the  text  entry. 


Check  this  checkbox  to  use  this  field  as  a pass- 
word field. 


Set  the  following  options  in  the  Properties  section  of  the  Form  Text 

Field  Inspector: 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the  text 
field  as  an  entity. 

• In  the  Content  text  box,  type  in  default  text  that  the  visitor  can 
overwrite  (optional). 

• In  the  Visible  text  box,  type  in  the  number  of  visible  characters 
to  determine  the  width  of  the  text  box. 

• In  the  Maxtext  box,  type  in  the  maximum  number  of  characters 
accepted  by  the  text  box  before  truncation  occurs.  If  empty,  this 
limit  is  determined  by  the  Web  browser  used  to  view  the  form. 

• Check  the  Is  Password  Field  checkbox  to  convert  the  text  field 
into  a password  field  (if  applicable). 
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The  section  Form  Navigation  Support,  starting  on  page  470,  explains 
the  options  in  the  Focus  section  of  the  Inspector  window. 


Password  Field 


Inserting  a Password  Field 


The  Password  Field  icon  inserts  a single-line  text  field  that  lets  the 
user  enter  a hidden  password. 

To  insert  a password  field,  proceed  as  follows: 

1 Drag  the  Password  Field  icon  from  the  Palette  and  drop  it  in  your 
form  layout  grid  or  document  window(or  double-click  the  icon 
in  the  Palette). 


2 Set  up  the  password  field  in  the  context-sensitive  Inspector  win- 
dow, now  titled  Form  Password  Inspector. 


The  Form  Password  Inspector 


Type  in  a unique  name  for  the  password  field 
here. 

Type  in  a default  text  entry  here. 

Type  in  a numerical  value  to  determine  the  length 
of  the  field. 

Type  in  a numerical  value  to  determine  the  maxi- 
mum length  of  the  password. 

Check  this  checkbox  to  use  this  field  as  a pass- 
word field. 


Form  Password  Inspector 


— Properties 
Name 
Content 


Pass  v/ordFi  eld 


Visible  [50_ 
Max  [5 


Is  Password  Field 
Focus 


□ Tab  jo  j JUj  Key  [ 
I I Readonly 
n Disabled 


J 
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Set  the  following  options  in  the  Properties  section  of  the  Form  Pass- 
word Inspector. 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the 
password  field  as  an  entity. 

• InLeave  the  Content  text  box  empty.  The  server  supplies  this 
information,  type  in  default  text  that  can  be  overwritten  by  the 
user  (optional) 

• In  the  Visible  text  box,  type  in  the  number  of  visible  characters 
to  determine  the  width  of  the  text  box. 

• In  the  Maxtext  box,  type  in  the  maximum  number  of  characters 
accepted  by  the  text  box  before  truncation  occurs.  If  empty,  this 
limit  is  determined  by  the  Web  browser  used  to  view  the  form. 

• Uncheck  the  Is  Password  Field  checkbox  to  convert  the  password 
field  into  a text  field  (if  applicable). 


Password  protection  of  Web  pages  is  an  interactive  feature  that 
requires  processing  of  user  entries  through  a CGI  script  on  the 
Web  server.  What  you  implement  in  Adobe  GoLive  is  the  visual 
representation  of  the  password  protection  mechanism. 

The  Form  Navigation  Support  section,  starting  on  page  470,  discusses 
the  options  in  the  Focus  section  of  the  Inspector  window. 


Text  Area 


The  Text  Area  icon  inserts  a text  field  that  lets  the  sitevisitors  enter 
multiple  lines  of  text — for  example,  feedback  on  your  Web  page. 

To  insert  a text  area,  proceed  as  follows: 

1 Drag  the  Text  Area  icon  from  the  Palette  and  drop  it  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 


-a. 

< 1 1111 1 !► 

Inserting  a Text  Area 
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2 Set  up  the  text  area  in  the  context-sensitive  Inspector  window, 
now  titled  Form  Text  Area  Inspector. 


The  Form  Text  Area  Inspector 

Type  in  a unique  name  for  the  text  area  here. 

Use  these  options  to  size  the  text  area  and  con- 
trol the  behavior  of  the  text. 


Type  in  a default  text  here. 


Off 

Virtual 

Physical 


3 


Set  the  following  options  in  the  Properties  section  of  the  Form  Text 
Area  Inspector: 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the  text 
area  as  an  entity. 

• In  the  Rows  text  box,  type  in  the  maximum  number  of  rows  to 
determine  the  height  of  the  text  box. 

• In  the  Columns  text  box,  type  in  the  number  of  visible  characters 
to  determine  the  width  of  the  text  area. 

• Choose  the  appropriate  option  from  the  Wrap  popup  menu  to 
control  the  behavior  of  the  line  breaks: 

- Default  uses  the  default  text  area  settings  of  the  browser. 

- Off  instructs  the  browser  to  ignore  the  Columns  limit  and  pre- 
vents text  entered  into  the  text  area  from  wrapping  at  the 
right  margin  of  the  box. 

Virtual  and  Physical  both  instruct  the  browser  to  respect  the 
Columns  limit.  The  entered  text  wraps  when  it  reaches  the 
right  margin  of  the  box  and  starts  scrolling  vertically. 

• In  the  Data  text  box  with  the  scroll  bar,  type  in  default  text  that 
the  user  can  overwrite  (optional). 


The  section  Form  Navigation  Support,  starting  on  page  470,  describes 
the  options  in  the  Focus  section  of  the  Inspector  window. 
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Hidden 


Inserting  a Hidden  Tag 


The  Hidden  icon  inserts  a hidden  tag  that  does  not  display  in  the 
browser  but  whose  values  are  submitted  with  the  form.  It  can  store 
information  during  intermissions  in  browser/server  exchanges. 

To  insert  a hidden  tag,  proceed  as  follows: 

1 Drag  the  Hidden  icon  from  the  Palette  and  drop  it  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 


2 Set  up  the  Hidden  tag  in  the  context-sensitive  Inspector  window, 
now  titled  Form  Hidden  Inspector. 


The  Form  Hidden  Inspector 

Type  in  a unique  name  for  the  hidden  tag  here. 
Type  in  a default  value  here. 


Set  the  following  options  in  the  Properties  section  of  the  Form  Hidden 
Inspector: 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the  hid- 
den tag  as  an  entity. 

• In  the  Value  text  box,  type  in  a default  value. 
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List  Box 


Inserting  a List  Box 


The  List  Box  icon  inserts  a scrolling  list  box  with  multiple  options  to 
choose  from. 

To  insert  a list  box,  proceed  as  follows: 

1 Drag  the  List  Box  icon  from  the  Palette  and  drop  it  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 


2 Set  up  the  list  box  in  the  context-sensitive  Inspector  window,  now 
titled  Form  List  Box  Inspector. 


The  Form  List  Box  Inspector 

Type  in  a unique  name  for  the  list  box  here. 
Type  in  the  number  of  rows  here. 

Check  this  box  to  enableallow  multiple  selec- 


View  the  available  list  box  options  here. 
Check  this  box  to  choose  a default  selection. 


Use  these  options  to  add  or  delete  items. 

Use  these  buttons  to  edit  the  content  of  the  list 
box. 


-f 
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Set  the  following  options  in  the  Properties  section  of  the  Form  List 

Box  Inspector: 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the  list 
box  as  an  entity. 

• In  the  Rows  text  box,  type  in  the  number  of  rows  you  want  to  be 
visible. 

• To  allow  the  user  to  select  one  or  more  options,  check  the  Multi- 
ple Selection  checkbox. 

• Successively  click  the  “First”,  “Second”,  and  “Third”  default  items 
in  the  Data  list  box  and  edit  their  visual  labels  and  the  values 
they  return  to  the  CGI  script,  as  desired. 

For  example,  you  can  set  up  the  list  box  so  that  the  CGI  receives 
a Mail_info_on  biking  message  string  when  the  visitor  selects  the 
Bicycles  item  and  submits  the  form. 

• If  desired,  select  an  option  from  the  list  box,  then  check  the  box 
next  to  the  Label  and  Value  text  boxes  tomake  have  the  browser 
display  that  option  as  be  the  default  selection. 

Additionally,  you  can  add  and  delete  options  using  the  following  but- 
tons: 

• Click  the  Delete  button  to  delete  the  currently  selected  option. 

• Click  the  Duplicate  button  to  duplicate  the  currently  selected 
option  for  editing. 

• Click  the  New  button  to  add  a new  option.  Enter  a label  and 
value  in  the  Label  and  Value  text  boxes,  respectively. 

The  Form  Navigation  Support  section,  beginning  on  page  470,  ex- 
plains the  options  in  the  Focus  section  of  the  Inspector  window. 


Popup  Menu 


The  Popup  Menu  icon  inserts  a popup  menu  with  multiple  options 
to  choose  from. 

To  insert  a popup  menu,  proceed  as  follows: 

1 Drag  the  Popup  Menu  icon  from  the  Palette  and  drop  it  in  your 
form  layout  grid  or  document  window(or  double-click  the  icon 
in  the  Palette). 


464 


CHAPTER  9 


Working  with  Forms 


Inserting  a Popup  Menu 


[ First  t") 

2 Set  up  the  list  box  in  the  context-sensitive  Inspector  window,  now 
titled  Form  Popup  Inspector. 

The  Form  Popup  Inspector 


Type  in  a unique  name  for  the  popup  menu 
here. 

Type  in  the  number  of  rows  here. 

Check  this  box  to  enable  multiple  selections. 


View  the  available  list  box  options  here. 

Check  this  box  to  choose  a default  selection. 

Use  these  buttons  to  edit  the  options  of  the 
popup  menu. 

Set  the  following  options  in  the  Properties  section  of  the  Form  Popup 

Inspector. 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the 
popup  menu  as  an  entity. 

• In  the  Rows  text  box,  type  in  the  number  of  rows  you  want  to  be 
visible  when  the  user  drags  the  menu. 

• To  allow  the  user  to  select  one  or  more  options,  check  the  Multi- 
ple Selection  checkbox.  This  changes  the  Popup  Menu  to  a List 
Box  form  element. 

• Successively  click  the  “First,”  “Second,”  and  “Third"  default  items 
in  the  Data  list  box  and  edit  their  visual  labels  and  the  values 
they  return  to  the  CGI  script,  as  desired. 
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Input  Image 


For  example,  you  can  set  up  the  popup  menu  so  that  the  CGI  re- 
ceives a Mail_info_on  biking  message  string  when  the  visitor  se- 
lects the  Bicycles  item  and  submits  the  form. 

• If  desired,  select  an  option  from  the  list  box  in  the  Inspector  win- 
dow and  check  the  box  next  to  the  Label  and  Value  text  boxes  to 
let  that  option  default  to  selected. 

Additionally,  you  can  add  and  delete  options  using  the  following  but- 
tons: 

• Click  the  Delete  button  to  delete  the  currently  selected  option. 

• Click  the  Duplicate  button  to  duplicate  the  currently  selected 
option  for  editing. 

• Click  the  New  button  to  add  a new  option.  Enter  a label  and 
value  in  the  Label  and  Value  text  boxes. 

The  section  Form  Navigation  Support,  startingon  page  470,  covers  the 

options  in  the  Focus  section  of  the  Inspector  window. 


The  Input  Image  icon  inserts  an  image  placeholder  that  can  be 
linkedto  with  a clickable  image — for  example,  a graphical  Submit 
button.  Inserting  graphics  help  site  visitors  to  navigate  through  your 
pages — for  example,  by  means  of  buttons  or  clickable  image 
maps.This  feature  provides  an  alternative  method  for  submitting  a 
form.  When  the  visitor  clicks  the  Input  Image,  its  x and  y coordinates 
are  passed  to  the  CGI  script  to  identify  where  the  visitor’s  action  oc- 
curred. This  information  can  trigger  some  forms  processing  action — 
for  example,  to  verify  text  entered  in  a user  ID  and  password  text 
field  combination. 
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To  insert  an  image  placeholder,  proceed  as  follows: 

1  Drag  the  Input  Image  icon  from  the  Palette  and  drop  it  in  your 
form  layout  grid  or  document  window(or  double-click  the  icon 
in  the  Palette). 


Inserting  an  Image  Placeholder 


2  Link  the  image  placeholder  with  a graphic  using  Point  & Shoot 
(see  page  158),  d rag  & drop  (see  page  159),  or  the  Browse  button 
(see  page  151)  of  the  Image  Inspector. 


The  Special  Tab  of  the 
Form  Image  Inspector 


3  Set  up  the  Input  Image  in  the  context-sensitive  Inspectorwlndow, 
now  titled  Special  tab  of  the  Image  Inspector.  Go  to  the  Form  sec- 
tion of  the  Special  tab.  Two  items  are  important  for  inputting  im- 
ages: 

- The  Is  Form  checkbox  is  selected  by  default  when  you  insert 
an  Input  Image  item.  (Do  not  deselect  this  checkbox  if  you 
plan  to  use  the  image  as  a clickable  button.) 
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A Simple  Login  Button 


This  login  button  is  a GIF  input  image.  It  submits 
the  text  entered  in  the  Your  User  ID  and  Your  Pass- 
word text  and  password  fields. 


Key  Generator 


3) 


Inserting  a Key  Generator 


Enter  a name  in  the  Name  text  box  to  identify  the  input  im- 
age as  a unique  item.  This  is  especially  important  if  you  are 
usingseveral  graphical  submit  buttons  within  thesameform. 
The  text  you  enter  in  the  Name  text  box  is  appended  to  the  x 
and  y coordinates  sent  to  the  CGI  script  to  indicate  that  the 
visitor  has  clicked  a specific  input  image  on  the  page  and  trig- 
ger a button-specific  action. 

An  example  of  a simple  login  button  appears  below. 


0 

Toni  User  ID: 


Tout  Password: 


••••• 


~ L'jy  In 


The  section  Form  Navigation  Support,  starting  on  page  470,  explains 
the  options  in  the  Focus  section  of  the  Special  tab  of  the  Inspector 
window. 


The  Key  Generator  icon  inserts  a key  generator  tag  that  lets  the  site- 
visitors  address  an  encryption  algorithm  for  safeguarding  transac- 
tions with  your  Web  site.  For  more  information  on  cryptographic 
issues  associated  with  forms,  please  contact  your  ISP’s  Web  master. 

To  insert  a key  generator,  proceed  as  follows: 

1 Drag  the  Key  Generator  icon  from  the  Palette  and  drop  it  in  your 
form  layout  grid  or  document  window(or  double-click  the  icon 
in  the  Palette). 


| Key  Generator  ;~) 
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2 Set  up  the  key  generator  in  the  context-sensitive  Inspector  win- 
dow, now  titled  Form  Keygen  Inspector. 


The  Form  Keygen  Inspector 


Type  in  a unique  name  for  the  Key  Generator 
here. 

Type  in  the  security  level  here. 


□ Form  Keygen  Inspector g 

Properties 

— Name  [xeyGenName  | 

— Challenge  | publickey  ~| 

— Focus  

□ Tab  fcT" 

I~1  Disabled 


I B I K*y  [ 


Set  the  following  options  in  the  Properties  section  of  the  Form  Keygen 
Inspector: 

• In  the  Name  text  box,  type  in  a unique  name  to  identify  the  Key 
Generator  as  an  entity. 

• In  the  Challenge  text  box,  type  in  the  security  level. 

The  Form  Navigation  Support  section,  starti ng  on  page  470,  covers  the 
options  in  the  Focus  section  of  the  Inspector  window. 


File  Browser 


Inserting  a File  Browser 


The  File  Browser  icon  inserts  a file  selection  dialog  that  lets  the  site- 
visitors  locate,  select,  and/or  open  individual  files  on  your  Web  site. 

To  insert  a File  Browser,  proceed  as  follows: 

1 Drag  the  File  Browser  icon  from  the  Palette  and  drop  it  in  your 
form  layout  grid  or  document  window(or  double-click  the  icon 
in  the  Palette). 


][  BiOTree...  | 
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2 Set  up  the  file  browser  in  the  context-sensitive  Inspector  window, 
now  titled  Form  File  Inspector. 


The  Form  File  Inspector 


Type  in  the  name  of  the  file  browser  here. 

Type  in  a numerical  value  to  size  the  file 
browser  window. 


□ Form  File  Inspector  @ 

l 1 

rName 

run  o 

□ Tab  jo 

1 I Disabled 

m 

Set  the  following  options  in  the  Properties  section  of  the  Form  File  In- 
spector: 

• In  the  Nametext  box,  type  in  the  name  and  directory  path  of  the 
file  browser  CGI  program  residing  on  the  Web  server. 

• In  the  Visible  text  box,  type  in  a numerical  value  to  determine 
the  width  of  the  file  browser  window  on  your  Web  page. 

The  section  Form  Navigation  Support,  starting  on  page  470,  explains 
the  options  in  the  Focus  section  of  the  Inspector  window. 


HTML  4.0  Forms  Tags  The  upcoming  HTML  4.0  standard  introduces  several  improvements 
and  Features  primarily  in  regard  to  user  interface,  allowing  Web  authors  to  focus 

on  individual  forms  elements,  display  temporarily  disabled  items, 
and  set  items  to  read-only  status. 

Other  enhancements  include  new  tags: 

• a universal  button  with  an  editable  label  area  that  accepts  text 
and  HTML  tags 

• labels  for  checkboxes,  radio  buttons,  and  other  forms  elements 
that  do  not  visually  indicate  what  they  do 

• field  sets  with  legends  that  allow  for  visually  grouping  forms  ele- 
ments of  the  same  type 
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Form  Navigation  Support 


With  HTML  4.0,  Web  authors  can  choose  to  make  their  forms  naviga- 
ble via  keyboard  shortcuts.  In  Adobe  GoLive,  these  attributes  are  im- 
plemented as  checkbox  options  that  appear  in  the  Focus  section  of 
the  different  Inspector  windows. 

In  an  HTML  form,  each  element  must  receive  focus  from  the  user  to 
become  active  and  perform  its  task.  In  earlier  versions  of  HTML,  this 
was  usually  accomplished  by  clicking  the  desired  element  with  the 
mouse.  HTML  4.0  introduces  two  alternative  ways  of  navigating  a 
form  via  the  keyboard: 

• Visitors  can  navigate  via  a tabbing  chain,  then  type  in  text  or 
press  the  Enter  key  to  trigger  some  form-specific  action. 

• Visitors  can  select  individual  elements  by  pressing  a platform- 
specific  key  combination,  then  type  in  text  or  press  the  Enter  key 
to  trigger  some  form-specific  action. 

Please  note  that,  at  the  time  of  writing,  only  the  Windows  ver- 
sion of  Microsoft  Internet  Explorer  4.0  supports  form  naviga- 
tion control  keys. 

The  following  section  explains  how  Adobe  GoLive  lets  you  implement 
either  tabbing  chains  or  access  keys  with  ease. 

Defining  and  Editing  Tabbing  Chains 

Adobe  GoLive  lets  you  define  a tabbing  chain  for  any  given  set  of 
forms  elements  on  the  same  page.  The  tabbing  chain  specifies  the 
order  in  which  form  elements  are  selected  when  the  visitor  presses 
the  tab  key  repeatedly. 

A tabbing  chain  is  defined  by  assigning  a tabindex  value  to  each  ele- 
ment. Navigation  proceeds  from  the  element  with  the  lowest  index 
to  the  element  with  the  highest  index.  Tab  index  values  do  not  need 
to  be  contiguous  or  start  at  any  particular  value.  You  can  even  assign 
the  same  tab  index  to  two  elements.  In  this  case,  the  sequence  in  the 
HTML  stream  determines  the  tabbing  order. 

The  following  elements  support  tab  indexing: 

• labels 

• text  and  password  fields 

• text  areas 

• Submit  and  Reset  buttons 

• checkboxes  and  radio  buttons 

• popup  menus  and  list  boxes 
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To  assign  a tab  index  value  to  the  elements  in  your  form,  proceed  as 
follows: 

1 In  Layout  view,  choose  the  Start  Tabulator  Indexing  command 
from  the  Special  menu  or  select  the  first  element  and  click  the 
Start/Stop  indexing  button  [JU  (the  button  with  the  pound  sign 
on  top)  in  the  Inspector. 

2 Small  yellow  indexing  boxes  (see  example  below)  appear  on  top 
of  or  inside  of  indexable  elements  throughout  your  form,  and  a 
pound  sign  appears  with  the  cursor**^  . 


Tab  Indexing  Checkboxes 


Yellow  boxes  indicate  indexable  elements. 


Option  1 

option  iarp 

Option  1 1 

_l 

Option  2 l] 

Option  2 j?J 

Option  2^2] 

Option 3 ?J 

Option  3 J?j 

Option  3 jtJ 

Step  1 

Choose  Start  Tabula- 
tor Indexing  from  the 
Special  menu. 


Step  2 

Click  the  forms  element 
you  want  to  be  the  first 
in  the  tabbing  chain. 


Step  3 

Click  the  second  forms 
element. 


Option  1 1 


Option  2 2_ 


Step  4 

Click  the  third  forms  el- 
ement. 


Option  1 1 
Option  2 
Option  3 


2 


3 


Result 


3 Click  each  element  successively  to  specify  the  tabbing  order.  As 
you  work  your  way  through  the  form,  a number  appears  in  each 
yellow  box  and  in  the  Tab  text  box  of  the  respective  Inspector. 
This  is  the  tab  index. 

4 When  you  finish  specifying  the  tabbing  chain,  choose  the  Stop 
Tabulator  Indexing  command  from  the  Special  menu  or  click  the 
Start/Stop  indexing  button  dT]  (now  recessed)  in  the  Inspector. 

5 Test  the  result  in  a browser  that  supports  tabbing  navigation — 
for  example,  Microsoft  Internet  Explorer  4.0  on  a Windows  plat- 
form. 


Alternatively,  you  can  select  the  forms  elements  one  by  one  and  en- 
ter a number  in  the  Tab  text  box  of  the  Inspector  (see  screenshot  be- 
low for  the  location  of  the  Tab  text  box). 
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Common  Controls  in  the  Focus  Section  of 
the  Inspector 

The  Start/Stop  indexing  button  toggles  tab  index- 
ing on  and  off. 

Click  the  Tab  checkbox  and  enter  a number  to 
specify  the  tab  index. 

Click  the  Read  only  checkbox  to  make  the  current 
element  non-editable. 

Click  the  Disabled  checkbox  to  temporarily  dis- 
able the  current  element. 

The  Key  text  box  lets  you  define  an  access  key  for 
the  current  forms  element. 


0 


To  change  an  existing  tabbing  chain,  proceed  as  follows: 

1 Select  the  element  with  which  you  want  to  start  renumbering. 

2 Choose  the  Start  Tabulator  Indexing  command  from  the  Special 
menu  or  click  the  Start/Stop  indexing  button  LfiJ  in  the  Inspector. 

3 Click  each  element  successively  to  change  the  tabbing  order. 

4 Afteryou  change  the  tabbing  chain,  choose  the  Stop  Tabulator  In- 
dexing command  from  the  Special  menu  or  click  the  Start/Stop 
indexing  button  [SJ  (now  recessed)  in  the  Inspector. 

5 Test  the  result  in  a browser  that  supports  tabbing  navigation — 
for  example,  Microsoft  Internet  Explorer  4.0  on  a Windows  plat- 
form. 

Defining  an  Access  Key 

Adobe  GoLive  lets  you  define  a unique  access  key  for  any  forms  ele- 
ment on  a page.  An  access  key  lets  the  visitor  focus  on  an  element  by 
pressing  a modifier  key  and  a dedicated  alphanumeric  key — for  ex- 
ample, “Alt-S” — to  activate  the  Submit  button  in  a Microsoft  Win- 
dows-based browser. 

The  following  elements  support  access  keys: 

• legends 

• labels 

• text  and  password  fields 

• text  areas 

• Submit  and  Reset  buttons 

• checkboxes  and  radio  buttons 
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To  define  an  access  key,  proceed  as  follows: 

1 Select  the  element  you  want  to  assign  a key  combination  to. 

2 Place  the  cursor  in  the  Key  text  box  of  the  Inspector  [see  Common 
Controls  in  the  Focus  Section  of  the  Inspector  on  page  472),  type 
any  alphanumeric  character,  then  press  the  Return  key  to  con- 
firm your  entry. 

3 Visually  indicate  the  presence  of  an  access  key — for  example,  by 
adding  a label  or  text  that  hints  at  the  key  combination. 

4 Repeatstepsl  and  2 for  the  next  forms  element,  makingsureyou 
do  not  assign  the  same  access  key  to  two  forms  elements. 

5 Test  the  result  in  a browser  that  supports  navigation  via  access 
keys — forexample,  Microsoft  Internet  Explorer  4.0  on  a Windows 
platform. 


Read-Only  Forms 
Elements 


HTML  4.0  lets  Web  authors  set  individual  HTML  forms  elements  to 
read-only  status — for  example,  to  include  some  text  that  must  ac- 
company the  form. 

The  following  elements  support  the  read-only  status: 

• Submit  and  Reset  buttons 

• text  and  password  fields 

• text  areas 

• checkboxes  and  radio  buttons 

• popup  menus  and  list  boxes 


To  set  an  element  to  read-only  status,  proceed  as  follows: 

1 Pick  the  element  you  want  to  set  to  read-only. 

2 Select  the  Read  only  checkbox  in  the  Inspector  window. 


Disabled  Form’s  Elements  If  you  want  input  from  users  in  a given  situation,  HTML  4.0  lets  you 

build  HTML  forms  with  “grayed-out”  elements  that  can  be  condition- 
ally enabled  by  a script. 

On  the  HTML  side,  this  occurs  by  adding  a “disabled”  attribute  to 
each  form’s  element  that  should  not  be  initially  available  when  the 
visitor  loads  the  form.  On  the  scripting  side,  this  function  can  be  im- 
plemented by  monitoring  another  form’s  element  for  a particular 
event  and  enabling  the  grayed-out  item  if  this  condition  is  fulfilled. 

For  example,  this  feature  allows  you  to  disable  a form’s  Submit  but- 
ton until  the  visitor  enters  some  required  data. 
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For  a complete  list  of  elements  that  support  the  disabled  status, 
please  refer  to  page  473  in  the  preceding  section. 

To  disable  an  element,  proceed  as  follows: 

1 Choose  the  element  you  want  to  disable. 

2 Select  the  Disabled  checkbox  in  the  Inspector  window. 

3 Write  the  script  to  implement  the  logic  that  dynamically  enables 
the  item. 


In  forms  designed  for  HTML  4.0  compatible  browsers,  the  Button 
icon  inserts  a universal  clickable  button  with  a user-editable  label 
area  inside.  It  works  exactly  like  a standard  Reset,  Submit,  or  Normal 
button,  but  its  label  area  accepts  HTML  to  let  you  customize  its  ap- 
pearance. You  can  insert  formatted  or  unformatted  text,  an  image, 
or  other  content  to  make  the  user  interface  of  your  form  more  intu- 
itive. 

To  insert  a Button,  proceed  as  follows: 

1  Drag  the  Button  icon  from  the  Palette  and  drop  it  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 


2 Double-click  the  Button  text  in  the  newly  inserted  button  item, 
enter  a description  of  your  choice  (for  example,  Send),  or  insert 
an  image  placeholder  and  link  it  with  a button  image. 

3 Set  up  the  Button  in  the  context-sensitive  Inspector  window,  now 
titled  Form  Button  Inspector. 
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The  Form  Button  Inspector 

Click  the  appropriate  button  to  select  another 
function. 


Use  this  text  box  to  specify  an  action  or  a value 
to  be  passed  to  the  CGI  script. 


□ Form  Button  Inspector @ 

Properties 

— Button  O Submit 

Q Reset 
m Normal 

Name  I ButtonName  | 

— Value  | | 

— Focus 

□ Tab  fcT i [Jj[]  [ 

I I Disabled 

r 


Set  the  following  options  in  the  Properties  section  of  the  Form  Button 
Inspector: 

• Use  the  Name  text  box  to  give  a unique  name  to  the  button. 

• Use  the  Value  text  box  to  specify  an  action  or  a value  to  be 
passed  to  the  CGI  script. 

The  Form  Navigation  Support  section,  starting  on  page  470,  explains 
the  options  in  the  Focus  section  of  the  Inspector  window. 


Label  In  forms  designed  for  HTML  4.0  compatible  browsers,  the  Label  icon 

inserts  a visual  label  that  can  identify  the  purpose  of  a checkbox,  ra- 
dio button,  text  field,  or  menu  to  the  visitor.  The  Label  tag  has  one 
major  advantage  over  the  HTML  text  labels  used  so  far:  It  behaves  ex- 
actly like  the  labels  you  know  from  your  Macintosh  programs  (in- 
cluding Adobe  GoLive).  Clicking  the  label  enables  or  disables  the 
associated  object — for  example,  a checkbox. 
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To  insert  a label,  proceed  as  follows: 

1  Drag  the  Label  icon  from  the  Palette  and  drop  it  at  an  appropri- 
ate location — for  example,  to  the  left  of  a checkbox  in  your  form 
layout  grid  or  document  window(or  double-click  the  icon  in  the 
Palette). 


2 Double-click  the  content  area  of  the  label  to  select  its  name  for 
overwriting,  then  start  typing  the  name  of  your  choice. 

3 Double-click  the  name  in  the  content  area  once  more  and  assign 
a style  such  as  boldface,  if  desired. 

4 Use  Point  & Shoot  to  link  the  label  with  the  checkbox: 

- Command-click  the  border  of  the  label.  The  “hand”  cursor 
f)  should  appear. 

Alternatively,  click  the  Point  & Shoot  icon  in  the  Form  Label  Inspector. 
Drag  to  the  forms  element  you  want  to  label. 


Point  & Shoot  Linking  a Label  with 
a Checkbox 


Command-clicking  the  label  lets  it  associate  with 
a forms  element  using  Point  & Shoot. 
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5 Inspect  the  label  in  the  context-sensitive  Inspector  window,  now 
titled  Form  Label  Inspector. 

Note  the  ID  that  has  appeared  in  the  Reference  text  box.  This  ID 
controls  the  association  between  the  checkbox  and  its  label. 

6 For  each  label  you  add  and  link  to  a forms  element,  clickSfjcwto 
check  the  association.  This  button  is  particularly  useful  if  your 
page  contains  multiple  pairs  of  label-form  elements. 


The  Form  Label  Inspector 

The  ID  of  the  associated  form  element  appears 

This  Point  & Shoot  button  lets  you  link  the  label 
from  within  the  Inspector. 

Click  Show  to  check  the  association. 


The  Form  Navigation  Support  section,  beginning  on  page  470,  covers 
the  options  in  the  Focus  section  of  the  Inspector  window. 


Field  Set  & Legend 


In  forms  designed  for  FITML4.0  compatible  browsers,  the  Field  Set  & 
Legend  icon  inserts  a bounding  box  that  allows  for  visually  grouping 
forms  elements.  You  can  use  the  legend  to  tell  visitors  the  purpose 
of  the  options  grouped  in  the  field  set. 

To  insert  a Field  Set  & Legend,  proceed  as  follows: 

1 Drag  the  Field  Set  & Legend  icon  from  the  Palette  and  drop  it  at  a 
convenient  location  (or  double-click  the  icon  in  the  Palette). 


Inserting  a Field  Set  with  a Legend 
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2 Set  up  the  field  set  in  the  context-sensitive  Inspector,  now  titled 
Form  Fieldset  Inspector: 

Deselect  the  Use  Legend  checkbox  if  you  do  not  want  a textual 
description  to  appear  within  the  bounding  box  of  the  field 

set. 


The  Form  Fieldset  Inspector  window 

Click  this  checkbox  to  enable  or  disable  the  leg- 

Use  this  menu  to  align  the  legend  with  respect  to 
the  field  set. 


□ Form  Fieldset  Inspector  S 


Legend 

0 Use  Legend 

— Alignment  | Default  ▼ ] 

— Focus 
Key  Q 


- Choose  an  alignment  option  from  the  Alignment  popup 

menu  to  position  the  legend: 

- Default  positions  the  legend  according  to  the  browser’s 
preferences.  (If  the  browser  does  not  specify  any  legend 
alignment  preferences,  which  is  the  case  with  all  current 
browser  versions,  the  legend  will  be  left-aligned.) 

Top  positions  the  legend  at  the  top  of  the  field  set. 

- Bottom  puts  the  legend  at  the  bottom  of  the  field  set. 

- Left  positions  the  legend  in  the  upper  left  corner  of  the 
field  set. 

- Center  positions  the  legend  in  the  upper  middle  of  the 
field  set. 

- Right  places  the  legend  in  the  upper  right  corner  of  the 
field  set. 
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The  Form  Navigation  Support  section,  starting  on  page  470,  explains 
the  Key  option  in  the  Focus  section  of  the  Inspector  window. 

3 Double-click  the  legend  of  the  field  set  to  select  its  name  for  over- 
writing, then  start  typing  the  name  of  your  choice. 

4 Drag  an  HTML  table  into  the  field  set,  then  add  several  checkbox- 
es, radio  buttons,  or  other  forms  elements  to  the  table  cells. 

An  example  of  a field  set  with  a legend  appears  below. 


Using  a Field  Set  for  Grouping  Checkboxes 


The  legend  may  be  positioned  using  the  Align- 
ment popup  menu  in  the  Inspector. 


The  bounding  box  visually  groups  items  in  a field 
set. 


rOptbns 

Option  1 Q 
Option  2 □ 
Option  3 Q 


Chapter  10 

General 

The  Head  Tab  of  the  Palette 


Opening  the  Head  Tab 
Inserting  Head  Tags 
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Working  with  Head  Tags 

This  chapter  introduces  Adobe  GoLive’s  comprehensive 
set  of  head  tags,  outlining  their  use  in  simple  step-by- 
step  instructions. 


The  Head  tab  of  the  Palette  contains  a complete  inventory  of  tags  for 
use  in  the  head  section  of  your  Web  page. 

In  addition  to  the  title  tag,  which  you  can  edit  directly  by  clicking  at 
the  title  field  above  the  document  window,  the  head  section  of  a 
Web  page  contains  invisible  tags  that  provide  document-related  in- 
formation to  the  Web  browser.  These  tags  can  be  used,  for  example, 
to  embed  page-specific  meta  information  or  preset  non-default  in- 
tervals for  updating  the  page  display. 


□ Palette  @ 

'□1  H fBl  El  <a]  0 | M)  m S] 

<P>|  OJRCj  <g>|  <<fr>|  <nm>|  <3>J 
<?>J  </?>)  <P>|  <g>| 

▲ 

▼ 

To  open  the  Head  tab  in  the  Palette,  click  its  tab. 


Because  head  tags  are  used  exclusively  in  the  head  section  of  the 
page,  Adobe  GoLive  lets  you  insert  them  only  in  the  expandable  head 
section  of  the  document  window. 

To  insert  head  tags,  proceed  as  follows: 

1 Click  at  the  small  triangle  control  at  the  upper  left  corner  of  the 
main  document  window  to  open  the  head  section. 

2 Drag  the  desired  head  tag  from  the  Palette  and  drop  it  in  the 
head  section. 
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Opening  the  Head  Section 


Click  on  the  small  triangle  control  . . . 


...  to  open  the  head  section. 


The  following  screenshots  illustrate  the  process  of  inserting  head 
tags. 
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Inserting  a Head  Tag 


Drag  a head  tag  from  the  Palette  and  drop  it  in 
the  head  section. 


□ Page2.html  0 0 

Palette  & 
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As  an  alternative,  you  can  also  drag  a head  tag  at  the  small  triangle 
control  and  wait  for  the  head  section  to  open.  You  can  then  drag  the 
tag  onto  the  head  section  and  drop  the  icon  there. 

The  following  sections  describe  the  individual  head  tags  and  their 
functions. 


Islndex 


The  Islndex  icon  inserts  a tag  that  instructs  the  Web  browser  to  add  a 
search  text  box  for  a keyword  search  when  displaying  the  page. 


The  Islndex  tag  is  obsolete.  We  recommend  not  using  it  any- 
more. 


To  insert  an  Islndex  tag,  proceed  as  follows: 

1 Drag  the  Islndex  icon  from  the  Palette  and  drop  it  in  the  head  sec- 
tion of  your  document. 
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The  Islndex  Inspector 

Type  in  a prompt  string  for  the  Web  browser 
here. 


Netscape  Navigator  Search  Prompt 


2 Set  up  the  tag  in  the  context-sensitive  Inspector  window,  now  ti- 
tled Islndex  Inspector. 


The  Islndex  Inspector  lets  you  set  only  one  option: 

In  the  Prompt  text  box,  type  in  the  string  you  want  the  Web 
browser  to  display  with  the  search  text  box  (see  below). 


Base 


The  Base  icon  inserts  a tag  that  points  to  another  document.  Using 
this  pointer  tag  makes  links  more  reliable  by  giving  the  Web  browser 
additional  information  about  the  location  of  a referenced  page. 


The  Base  tag  is  an  obsolete  tag  from  the  days  of  “hand-coded” 
HTML.  We  recommend  not  using  it  anymore. 
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Inserting  a Base  Tag 


To  insert  a Base  tag,  proceed  as  follows: 

1 Drag  the  Base  icon  from  the  Palette  and  drop  it  in  the  head  sec- 
tion of  your  document. 


tied  Base  Inspector. 


The  Base  Inspector 

Type  in  the  URL  for  the  referenced  document 
here,  click  Browse  to  select  a URL,  or  click  the 
Point  & Shoot  button  to  link  to  one. 


Use  this  option  to  specify  the  target  frame  in  a 
frame  set. 


This  checkbox  converts  the  path 
to  the  referenced  page  to  an 
absolute  path.  This  option  is  dis- 
cussed in  the  section  Setting  Up 
Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe 
GoLive. 


The  Base  Inspector  lets  you  set  several  options: 

• In  the  Base  text  box,  type  in  the  URL  for  the  referenced  docu- 
ment, click  Browse  to  select  a URL,  or  click  the  Point  & Shoot  but- 
ton to  link  to  a resource  in  the  Site  Window. 

Write  Base  always  absolute  lets  Adobe  GoLive  use  absolute  paths 
to  the  referenced  document. 

• Target  lets  you  select  the  destination  frame  in  a frame  set. 
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Keywords 


The  Keywords  icon  inserts  a container  tag  for  keywords  that  Web 
search  engines  can  access. 

To  insert  a Keywords  tag,  proceed  as  follows: 

1  Drag  the  Keywords  icon  from  the  Palette  and  drop  it  in  the  head 
section  of  your  document. 


Inserting  a Keywords  Tag 


2  Set  up  the  tag  in  the  context-sensitive  Inspector  window,  now  ti- 
tled Keywords  Inspector. 


The  Keywords  Inspector 


This  scrolling  list  box  shows  the  current  key- 
words. 


Type  in  a keyword  for  search  engines  here. 


Click  Add  to  add  the  new  keyword. 


Add,  delete,  or  update  keywords  in  the  Keywords  Inspector: 

In  the  text  box  below  the  scrolling  window,  type  in  a keyword  you 
want  to  post  for  search  engines  and  click  Add  to  add  the  keyword  to 
your  page  header. 

3 Select  an  existing  keyword  and  click  Delete  to  delete. 

4 Edit  an  existing  keyword  and  click  Update  to  save  the  changes. 

Alternatively,  you  can  select  a word  in  your  document  and  choose 
the  Add  to  Keywords  command  from  the  Special  menu  or  press  Com- 
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mand-K  to  insert  a keyword  tag  with  a single  keyword  or  add  key- 
words to  an  existing  tag. 


Link 


The  Link  icon  inserts  a comment  tag  that  defines  the  relationship  be- 
tween the  current  document  and  other  documents  or  the  author,  al- 
lowing Web  authors  to  keep  track  of  inter-file  links  in  large  Web  sites. 


You  won’t  need  the  Link  tag  if  you  manage  your  pages  in  Adobe 
GoLive’s  Site  Window,  which  offers  this  functionality  and  much 
more. 


To  insert  a Link  tag,  proceed  as  follows: 

1 Drag  the  Link  icon  from  the  Palette  and  drop  it  in  the  head  sec- 
tion of  your  document. 


Inserting  a Link  Tag 


2 Set  up  the  tag  in  the  context-sensitive  Inspector  window,  now  ti- 
tled Link  Inspector. 


The  Link  Inspector 


Type  in  the  destination  or  source  URL  here,  click 
Browse  to  selecta  URL,  or  click  the  Point&Shoot 
button  to  link  to  one. 

Type  in  the  title  of  the  referenced  or  referencing 
document  here. 

Type  in  the  name  of  the  link  or  anchor  here. 
Type  in  the  Uniform  Resource  Number  here. 


Type  in  a list  of  supported  functions  here. 


Defines  the  relationship  between  the  current 
page  and  the  source  or  destination  URL. 
Defines  the  relationship  between  the  source  or 
destination  URL  and  the  current  page. 


This  checkbox  converts  the 
path  to  the  referencing  page  to 
an  absolute  path.  This  option 
is  discussed  in  the  section  Set- 
ting Up  Adobe  GoLive  to  Use 
Absolute  Paths  on  page  719  in 
Chapter  17,  Managing  Web 
Sites  with  Adobe  GoLive. 
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Set  the  following  Link  attributes  in  the  Link  Inspector. 

• In  the  URL  text  box,  type  in  the  destination  or  source  URL  to 
identify  the  referenced  or  referencing  document  or  other 
resource. 

Alternatively,  click  the  Browse  button  to  select  a URL  in  the  subse- 
quent file  selection  dialog,  or  click  the  Point  & Shoot  button  to  drag 
a link  to  a resource  in  theS/'fe  Window  or  to  the  small  document  icon 
next  to  the  title  of  the  respective  document. 

• In  the  Name  text  box,  type  in  the  title  of  the  referenced  or  refer- 
encing document. 

• In  the  URN  text  box,  type  in  a Uniform  Resource  Number  for 
your  document,  if  applicable. 

(URNs  were  originally  intended  as  a better  method  of  referring  to 
links  but  currently  are  not  used  or  supported.) 

• In  the  Methods  text  box,  type  in  a list  of  HTTP  methods  sup- 
ported by  the  object,  if  applicable. 

(Like  the  URN  attribute,  the  Methods  attribute  is  seldom  used  or 
supported.) 

• In  the  REL  text  box,  type  in  a description  of  the  relationship 
between  the  current  page  and  the  source  or  destination  URL. 

For  example,  if  the  homepage  references  the  current  page,  type 
in  “follows”. 

• In  the  REV  text  box,  type  in  a description  of  the  (reverse  or  oppo- 
site) relationship  between  the  source  or  destination  URL  and  the 
current  page. 


Meta 


The  Meta  icon  inserts  a tag  that  lets  you  include  specialized  informa- 
tion in  your  document,  such  as  the  physical  location  of  your  page. 
Netscape  users,  for  example,  can  view  this  information  when  choos- 
ing the  Document  Info  command  from  the  File  menu. 

Adobe  GoLive  automatically  includes  the  following  meta  informa- 
tion in  the  head  section: 

• the  file  format — for  example,  text/HTML 

• the  character  set  used — for  example,  iso-8859 -1 

• the  file  creator,  which  is  Adobe  GoLive 


To  insert  a Meta  tag,  proceed  as  follows: 

1 Drag  the  Meta  icon  from  the  Palette  and  drop  it  in  the  head  sec- 
tion of  your  document. 
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Inserting  a Meta  Tag 


2 Set  up  the  tag  in  the  context-sensitive  Inspector  window,  now  ti- 
tled Meta  Inspector. 


The  Meta  Inspector 

Choose  HTTP-Equivalent  to  bind  the  meta-ele- 
ment  to  an  HTTP  response  header. 

Type  in  a name  for  the  item  of  meta  information 
you  wish  to  add  or  use  the  popup  menu  to 
choose  a suggestion  from  the  HTML  tag  database. 


Type  in  the  content  of  the  meta  information 
here. 


Add,  delete,  or  update  meta  information  in  the  Meta  Inspector: 

• Choose  HTTP-Equivalent  to  instruct  the  HTTP  server  to  transmit 
the  HTTP  header  field  specified  in  the  single-line  text  box  with 
the  content  of  the  Content  text  box. 

• Choose  Name  to  define  a non-HTTP  meta  tag  for  your  head  sec- 
tion and  send  other  meta  data — for  example,  “Author”  or  “Copy- 
right”. 

• After  you  select  HTTP-Equivalent,  type  in  the  name  of  the  HTTP 
header  field  that  you  want  to  send  along  with  the  page. 

• After  you  choose  Name,  type  in  the  special  information  that  you 
want  to  send  along  with  your  page. 

• Type  the  meta  information  in  the  large  text  box  below  the 
popup  menu  and  press  the  Return  key  to  confirm  your  entry. 
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• Add  and  define  other  meta  tags  accordingly  if  you  want  to 
include  additional  document-related  information. 


Refresh 


Inserting  a Refresh  Tag 


The  Refresh  icon  inserts  a tag  that  instructs  the  Web  browser  to  up- 
date the  display  at  non-default  intervals,  overriding  the  browser’s 
preferences.  This  tag  is  particularly  useful  if  your  page  contains  live 
material  or  if  you  want  to  present  a slide  show  to  your  audience. 

To  insert  a Refresh  tag,  proceed  as  follows: 

1 Drag  the  Refresh  icon  from  the  Palette  and  drop  it  in  the  head 
section  of  your  document. 


<»>l 

2 Set  up  the  tag  in  the  context-sensitive  Inspector  window,  now  ti- 
tled Refresh  Inspector. 


The  Refresh  Inspector 

Type  in  a numerical  value  for  the  refresh  interval 
here. 


Click  this  radio  button  to  have  the  browser  re- 
fresh the  current  document. 

Click  this  radio  button  to  have  the  browser 
replace  the  initial  page  with  a new  one. 

Type  in  the  destination  URL  here,  click  Browse  to 
select  a URL,  or  click  the  Point  & Shoot  button  to 
link  to  the  next  page. 

This  checkbox  converts  the  path  to  the  refer- 
enced page  to  an  absolute  path.  This  option  is 
discussed  in  the  section  Setting  Up  Adobe  GoLive 
to  Use  Absolute  Paths  on  page  719  in  Chapter  17, 
Managing  Web  Sites  with  Adobe  GoLive. 


□ Refresh  Inspector 


10 


- Delay 

Target 

HS)  This  Document 

-0  URL 


(seconds) 


H) 


[71  Absolute  | Brovse... 


r 
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Set  the  following  options  in  the  Refresh  Inspector: 

• In  the  Delay  section,  type  in  a value  in  the  seconds  text  box  to 
determine  the  refresh  interval. 

• In  the  Target  section,  click  the  This  Document  radio  button  to 
have  the  browser  refresh  the  current  document. 

Alternatively,  to  present  a slide-show  to  your  audience,  click  the  URL 
radio  button  to  have  the  browser  replace  the  initial  page  with  a new 
one  specified  in  the  URL  box.  You  can  repeat  the  Refresh  tag  in  the 
head  of  the  new  page  to  jump  to  a third  page  or  return  to  the  first 
page. 


Unknown  Tag 


Adobe  GoLive  lets  you  insert  unknown  start  and  end  tags  to  ensure 
compatibility  with  future  revisions  of  the  HTML  standard  and  up- 
coming Web  browsers 

To  insert  an  unknown  head  tag,  proceed  as  follows: 

1 Drag  the  Start  Tag  icon  from  the  Palette  and  drop  it  in  the  head 
section  of  your  document. 


Inserting  an  Unknown  Head  Tag 


2 Name  the  new  tag  and  specify  its  attributes  in  the  Tag  Inspector. 
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The  Tag  Inspector 


Type  in  the  tag  name  here. 


View  the  tag  attributes  and  values  in  the  at- 
tributes list  field. 


Type  in  the  attribute  name  and  value  here. 
Click  this  button  to  delete  an  attribute. 

Click  this  button  to  add  a new  attribute. 


3 Type  in  text  or  insert  other  content. 

4 Add  and  name  the  End  Tag  accordingly  using  the  Endtag  Inspec- 
tor (only  if  the  new  feature  requires  a closing  tag). 

Name  tags  and  add,  delete,  or  update  attributes  in  the  Tag  Inspector: 

• In  the  head  section,  click  to  select  the  unknown  start  tag. 

• In  the  Tag  Inspector,  enter  the  name  of  the  new  tag  in  the  Tag 
Name  text  box  and  press  the  Return  key  to  confirm  your  entry. 

• If  you  know  what  the  tag  will  look  like  when  the  browser  dis- 
plays it,  click  the  Invisible  or  Use  width/height  radio  button.  If 
not,  leave  the  Unknown  button  activated. 

• Click  the  New  button  to  add  a new  attribute.  (This  activates  the 
text  boxes  below  the  list  field.) 

• Enter  an  attribute  name  in  the  left  text  box  and  press  the  Return 
key  to  confirm  your  entry.  The  attribute  name  will  appear  in  the 
Attribute  column  of  the  list  field. 

• Enter  an  attribute  value  in  the  right  text  box  and  press  the 
Return  key  to  confirm  your  entry.  The  attribute  value  will  appear 
in  the  Value  column  of  the  list  field. 

To  rename  an  existing  tag  or  edit  a tag  attribute,  click  the  Tagname 

text  box  or  the  desired  attribute  in  the  list  field. 

When  you  rename  a tag,  don’t  forget  to  click  the  closing  tag  and 
rename  it  accordingly  in  the  Endtag  Inspector. 
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To  remove  the  currently  selected  attribute,  click  the  Delete  button. 


Comment 


Inserting  a Comment 


The  Comment  Inspector 


Type  in  your  comment  here. 


The  Comment  icon  inserts  a tag  that  lets  you  add  hidden  comments 
to  your  head  section,  so  you  can  include  publishing  information  for 
future  reference.  A Web  page  editor,  such  as  Adobe  GoLive,  is  neces- 
sary to  view  comments. 

To  insert  a comment,  proceed  as  follows: 

1 Drag  the  Comment  icon  from  the  Palette  and  drop  it  in  the  head 
section  of  your  document. 


2 Type  in  descriptive  text  for  future  reference  in  the  context-sensi- 
tive Inspector  window,  now  titled  Comment  Inspector. 
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Script 


Inserting  a Script 


The  Script  icon  inserts  a tag  that  lets  you  add  a JavaScript  to  your  doc- 
ument head,  allowing  a script  to  be  executed  while  the  visible  body 
section  of  the  document  is  still  being  loaded. 

To  insert  a script,  proceed  as  follows: 

1 Drag  the  Script  icon  from  the  Palette  and  drop  it  in  the  head  sec- 
tion of  your  document. 


titled  Head  Script  Inspector. 

3 Select  a JavaScript  dialect  from  the  Language  popup  menu. 


The  Head  Script  Inspector 

Use  this  text  box  to  name  the  JavaScript. 


Select  a JavaScript  “dialect”  from  this  popup 


Click  here  to  type  in  the  resource  locator  of  an 
existing  script,  click  Browse  to  select  a script,  or 
click  the  Point  & Shoot  button  to  link  to  a script 
in  the  Site  Window. 


Click  Edit  to  open  the  Script  Editor  and  start 
scripting. 


□ Head  Script  Inspector 


| Head  Script  1 


] 


-Language  | Navigator  4.x 


| JavaScript  1 .2 


D Source 


Absolute  Brovse.. 


Edit...  I 


This  checkbox  converts  the  path 
to  the  referenced  script  file  to 
an  absolute  path.  This  option  is 
discussed  in  the  section  Setting 
Up  Adobe  GoLive  to  Use  Absolute 
Paths  on  page  719  in  Chapter 
17,  Managing  Web  Sites  with 
Adobe  GoLive. 


4 Click  the  Edit...  button  in  the  Head  Script  Inspector  or  double- 
click the  Script  icon  in  the  head  section  to  open  the  script  editor. 

Alternatively,  click  the  Point  & Shoot  button  to  link  to  a script  in  the 
Site  Window.,  or  place  the  cursor  in  the  Source  text  box  and  type  in 
the  resource  locator  of  an  existing  script,  click  Browse  to  select  a 
script  in  the  subsequent  dialog  box,  or 

For  more  details  on  JavaScript  and  the  Script  Editor,  please  refer  to 
The  JavaScript  Editor  on  page  1 88. 
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The  Color  Palette 


This  chapter  introduces  Adobe  GoLive’s  Color  Palette— 
the  tool  you  use  to  add  color  to  your  Web  pages. 


General  The  Color  Palette  lets  you  quickly  add  color  to  text  and  objects.  It 

does  not  limit  your  creativity  by  restricting  you  to  a basic  spectrum 
of  colors. 


The  Color  Palette 

Click  the  preview  pane  and  drag  color  to  an  ob- 
ject or  text. 


Click  any  tab  to  view  more  color  spaces. 


Click  here  to  select  a color. 


Opening  the  There  are  two  ways  to  open  the  Color  Palette: 

Color  Palette  • Go  to  the  Window  menu  and  choose  Color  Palette. 

• Most  Inspector  windows  in  Adobe  GoLive  have  a checkbox  and 
color  field  combination.  When  the  Color  Palette  is  not  visible, 
clicking  the  color  field  automatically  pops  up  Adobe  GoLive’s 
color  editing  tool  and  selects  the  checkbox. 


Collapsing  the 
Color  Palette 


When  you  don’t  need  the  Color  Palette,  you  can  temporarily  collapse 
it  by  dragging  it  to  the  right  edge  of  the  screen.  The  icon  at  the  left 
appears,  indicating  that  the  Color  Palette  has  been  collapsed.  To  re- 
open the  Color  Palette,  simply  click  this  icon. 
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Coloring  Text 
and  Objects 


The  Color  Palette  supports  drag  & drop  coloring. 

To  color  a text  or  an  object,  proceed  as  follows: 

1 Select  a color  from  the  tab  of  your  choice.  The  selected  color  will 
appear  in  the  preview  pane. 

2 Drag  the  color  from  the  preview  pane  of  the  Color  Palette  and 
drop  it  onto  the  selected  text  or  object. 

The  following  screenshot  illustrates  the  process  of  drag  & drop 
coloring. 


Drag  & Drop  Coloring 


Click  the  preview  pane,  drag  the  color,  and  drop 
it  on  the  selected  text  or  object. 


Alternatively,  you  can  also  drag  a color  directly  from  the  scrolling  list 
in  the  Real  Web  Colors  or  Web  Named  Colors  tabs  (see  pages  504  and 
505). 


Extracting  Text  and 
Object  Color 


/ 


The  Color  Palette  also  lets  you  reverse  color  text  and  objects — ex- 
tracting colors  from  a region  below  the  mouse  pointer.  This  feature 
is  useful  when  you  want  to  match  the  colors  of  two  objects. 

To  extract  a color  from  a region  on  screen,  proceed  as  follows: 

1 Click  the  Apple  Colors  tab  or  the  Web  safe  (I)  tab  (see  page  503). 

2 Click  any  swatch  in  the  checkerboard  colors  field  in  of  th e Apple 
Colors  or  Real  Web  Colors  tab  and  hold  the  mouse  button  down. 
The  cursor  turns  into  a pipette  while  on  top  of  the  colors  field. 

3 While  continuing  to  hold  down  the  mouse  button,  drag  outside 
of  the  Color  Palette  window  to  the  object  whose  color  you  want 
to  match — for  example,  to  colored  text  in  a layout  text  box. 

Make  sure  the  preview  pane  at  the  top  of  the  Color  Palette  shows 
the  color  you  want. 

4 Release  the  mouse  button.  The  color  of  the  area  below  the  point- 
er becomes  the  current  color  and  appears  in  the  preview  pane  of 
the  Color  Palette  window. 

5 Drag  the  new  color  from  the  preview  pane  and  drop  it  on  the 
chosen  object  to  match  the  color  to  the  first  object. 


Color  Spaces 
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Color  Spaces 

The  RGB  Tab 

The  RGB  Tab  of  the  Color  Palette 

Click  this  tab  to  view  RGB  color  options. 
Use  these  sliders  to  control  RGB  color. 


The  CMYK  Tab 


Adobe  GoLive’s  Color  Palette  supports  a variety  of  different  color 
spaces.  You  can  choose  colors  from  any  of  the  following  color  spaces, 
arranged  under  seven  specific  tabs. 


Clicking  the  RGB  tab  opens  it.  The  RGB  tab  contains  three  slider  con- 
trols that  let  you  adjust  the  percentage  of  the  red,  green,  and  blue 
portions  of  the  spectrum. 


Click  this  button  to  toggle  between  color 
values  in  percent  and  the  256-step  numer- 
ical scale. 


To  select  a color,  click  any  slider  control  and  drag  until  you  have  the 
percentage  you  want. 

Repeat  this  adjustment  with  the  two  remaining  sliders  until  the  color 
you  want  appears  in  the  preview  pane. 

The  percent  button  at  the  right  edge  of  the  window  toggles  between 
RGB  values  in  percent  and  the  256-step  numerical  scale. 


Click  the  CMYK  tab  to  open  it.  The  four  slider  controls  of  the  CMYK 
tab  let  you  adjust  the  percentage  of  the  cyan,  magenta,  yellow,  and 
black  portions  of  the  spectrum. 
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The  CMYK  Tab  of  the  Color  Palette 


Click  this  tab  to  view  CMYK  color  options. 


Use  these  sliders  to  control  CMYK  color. 


Click  this  button  to  toggle  between  color 
values  in  percent  and  the256-step  numer- 
ical scale. 


Drag  each  slider  until  the  desired  color  appears  in  the  preview  pane. 


The  percent  button  at  the  right  edge  of  the  window  toggles  between 
CMYK  values  in  percent  and  the  256-step  numerical  scale. 


The  Grayscale  Tab 


The  Grayscale  Tab  of  the  Color  Palette 


Click  this  tab  to  view  grayscale  options. 


Use  this  slider  to  control  grayscale. 


Clicking  the  Grayscale  tab  opens  it.  The  Grayscale  tab’s  single  slider 
control  allows  you  to  adjust  the  percentage  of  black  to  create  shades 
of  gray. 


Click  this  button  to  toggle  between  gray- 
scale values  in  percent  and  the  256-step 
numerical  scale. 


|L JZ 

Drag  the  slider  to  obtain  the  desired  shade  of  gray. 

The  percent  button  at  the  right  edge  of  the  window  toggles  between 
grayscale  values  in  percent  black  and  the  256-step  numerical  scale. 
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The  Indexed  Colors  Tab 


The  Indexed  Colors  Tab  of  the 
Color  Palette 


Click  this  tab  to  view  indexed  color  options. 


Click  the  color  wheel  to  select  an  indexed  color. 
Use  this  slider  to  control  brightness. 


Click  the  Indexed  Colors  tab  to  open  it.  The  color  wheel  of  the  Indexed 
Colors  tab  lets  you  access  the  entire  color  spectrum  currently  support- 
ed by  your  video  hardware,  plus  a brightness  slider  control. 


Click  this  button  to  toggle  between  color 
values  in  percent  and  the  256-step  numer- 
ical scale. 


To  select  a color,  click  a location  in  the  color  wheel,  then  adjust 
brightness  as  needed. 

The  percent  button  at  the  right  edge  of  the  window  toggles  between 
indexed  color  values  in  percent  and  the  256-step  numerical  scale. 


The  Apple  Colors  Tab 


Clicking  th e Apple  Colors  tab  opens  it.  Th e Apple  Colors  tab  contains 
various  fixed  system  color  spaces  up  to  a maximum  of  256  colors. 


The  Apple  Colors  Tab  of  the  Color  Palette 


Click  this  tab  to  view  Apple  system  color  options. 


Click  any  swatch  to  select  a color. 


Choose  a basic  set  of  colors  from  this  menu. 
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The  Color  Palette 


The  popup  menu  in  th e Apple  Colors  tab  allows  you  to  limit  your 
choice  of  colors,  capture  the  current  desktop  colors,  and  build  a cus- 
tom color  palette  by  choosing  the  Custom  Palette  item  and  extracting 
color  from  other  objects  on  the  desktop  (see  Extracting  Text  and 
Object  Color  on  page  500). 

The  following  screenshot  shows  a set  of  custom  colors  in  the  Apple 
Colors  tab. 


A Custom  Color  Palette  in  the  Apple  Colors 
Tab 


Clicking  a swatch  and  dragging  to  a colored  ob- 
ject on  the  screen  lets  that  color  appear  in  the 
Preview  pane. 

You  can  fill  each  swatch  by  dropping  a color 
from  the  Preview  Pane  on  it. 


The  Real  Web  Colors  Tab 


The  Real  Web  Colors  Tab  of  the  Color 
Palette 


Click  this  tab  to  view  Real  Web  Colors  options. 
Click  a swatch  to  select  a color . . . 

...  or  scroll  through  the  list  and  click  a color  of 
your  choice. 


Clicking  the  Web  I tab  opens  the  Real  Web  Colors  tab,  which  contains 
a choice  of  216  no-dither  browser-safe  colors. 


To  select  a color,  click  a swatch  in  the  left  field  or  scroll  through  the 
list  box  to  the  right  and  click  the  color  of  your  choice.  The  Value  text 
box  shows  the  Red,  Green,  Blue,  decimal,  and  hexadecimal  value 
sent  to  the  Web  browser. 


Color  Spaces 
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The  colors  on  the  Real  Web  Colors  tab  are  browser-safe  across 
platforms.  By  limiting  the  number  of  colors  to  less  than  216 
eight-bit  colors,  you  can  ensure  that  your  page  looks  good 
when  being  viewed  on  a system  set  to  256  display  colors,  such 
as  standard  PCs. 


The  Web  Named  Colors  Click  the  Web  II  tab  to  open  the  Web  Named  Colors  tab,  which  con- 
Tab  tains  a choice  of  browser-callable  colors. 


The  Web  Named  Colors  Tab  of  the  Color 
Palette 


Click  this  tab  to  view  the  Web  Named  Colors. 


Click  a list  entry  to  select  a color. 
A box  outlines  your  choice. 


To  select  a color,  scroll  through  the  list  box  at  the  bottom  of  the  win- 
dow and  click  the  color  of  your  choice.  The  Name  and  Value  text 
boxes  show  the  clear-text  name  and  the  HTML  control  code  sent  to 
the  Web  browser. 


The  colors  on  the  Web  Named  Colors  tab  are  not  necessarily 
browser-safe  across  platforms. 
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The  Site  Colors  Tab  Clicking  the  tab  at  the  far  right  opens  the  Site  Colors  tab.  It  contains 

the  colors  you  have  collected  in  the  Colors  tab  of  the  Site  Window. 
(For  more  details,  see  the  section  The  Colors  Tab  on  page  612  in 
Chapter  17,  Managing  Web  Sites  with  Adobe  GoLive.) 


The  Site  Colors  Tab  of  the  Color  Palette 


Click  this  tab  to  view  the  Site  Colors. 


Click  a list  entry  to  select  a color. 


The  name  of  the  active  Site  Window  appears 
here. 


To  select  a color,  scroll  through  the  list  box  at  the  bottom  of  the  win- 
dow and  click  the  color  of  your  choice. 

The  colors  in  this  tab  are  only  available  if  the  Site  Window  is  open 
and  if  the  active  site  contains  site  colors.  If  there  is  no  open  site  doc- 
ument, a No  active  site  message  appears  in  the  status  line  at  the  bot- 
tom of  the  window. 

If  you  have  more  than  one  site  open  at  a time,  the  colors  you  see  in 
the  Site  Colors  tab  are  contributed  by  the  top  Site  Window  (which  a 
document  window  may  hide  or  partly  conceal). 
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Outline  Editor 
Features 


The  Outline  Editor  Screen 


Using  the  Outline  Editor 

This  chapter  describes  the  basic  functionality  of  the 
Adobe  GoLive  Outline  Editor,  explains  the  menu  com- 
mands, and  gives  instructions  on  how  to  build  or  edit 
Web  pages  in  Outline  mode.  You  should  be  familiar  with 
the  contents  of  this  chapter  before  starting  to  edit  HTML. 


The  Adobe  GoLive  Outline  Editor  adds  enhanced  HTML  editing  func- 
tionality to  Adobe  GoLive,  allowing  you  to  generate  clean,  valid 
HTML  without  typing  a single  element  of  code.  Full  integration  with 
Adobe  GoLive’s  Web  Database  lets  Web  authors  select  tags  and  at- 
tributes from  a menu  of  valid  choices.  You  can  build  Web  pages  from 
scratch,  fine-tune  your  code,  or  define  new  tags  and  attributes  still 
unsupported  by  the  Layout  Editor. 

The  Outline  Editor  uses  a completely  new  approach  to  HTML  editing. 
Unlike  conventional  editors,  which  display  more  or  less  raw  HTML 
code,  Adobe  GoLive’s  Outline  Editor  presents  the  HTML  backbone  of 
your  Web  page  and  its  content  in  a clear-cut  outline  view. 


Adobe  GoLive’s  Outline  Editor  also  provides  full  drag  & drop  support 
for  all  Basic  Tags  from  the  Palette,  and  it  lets  you  use  Point  & Shoot 
linking. 
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As  with  Adobe  GoLive’s  Layout  and  Source  views,  the  HTML  syntax  is 
constantly  checked  for  errors.  Visual  error  indicators  allow  you  to 
pinpoint  potential  problems  and  proceed  immediately  to  trouble- 
shooting them. 

International  script  systems  selected  using  any  of  Adobe  GoLive’s  En- 
codings options  are  displayed  as  cleartext,  enabling  users  to  edit  for- 
eign-language content — for  example,  Japanese  or  Chinese 
characters. 


To  use  the  Outline  Editor,  the  HTML  Outline  Module  must  be  en- 
abled in  the  preferences  (see  Using  the  Modules  Manager  on 
page  8 ). 


The  Outline  Toolbar 


The  Outline  Toolbar 

This  button  inserts  a new  tag. 

This  button  inserts  a new  attribute. 
This  button  inserts  new  HTML  text. 


While  you  are  working  in  Outline  mode,  the  context-sensitive  toolbar 
turns  into  the  Outline  Toolbar.  This  toolbar  provides  a specific  set  of 
shortcut  buttons  that  let  you  insert  new  tags  and  other  elements  at 
the  current  cursor  position. 


□ 

<?> 

<?=> 

=s 

p 

<5 

> 

</> 

This  button  toggles  between  the  unary  and 
binary  tag  formats. 

New  Custom  Tag 

This  button  inserts  an  HTML  comment. 


The  following  list  identifies  the  buttons  in  the  Outline  Toolbar: 


Button 


Function 

The  New  HTML  Tag  button  inserts  a new  HTML  tag  below  the  currently  selected  tag. 


The  New  HTML  Attribute  button  inserts  a new  HTML  attribute  in  the  currently  selected  tag. 


The  New  HTML  Text  button  inserts  a new  HTML  text  box  below  the  currently  selected  tag. 


| f—.  | The  New  HTML  Comment  button  inserts  a new  HTML  comment  box  below  the  currently  se- 
1 ^ I lected  tag. 


1^1 


The  Toggle  Binary  button  toggles  the  tag  format  from  unary  to  binary  and  vice  versa.  Unary 
tags  don’t  have  an  end  tag,  while  binary  tags  have  a start  tag  and  an  end  tag. 
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Outline  Editor  Several  commands  in  the  Special  menu  are  reserved  for  the  Outline 

Commands  in  Your  Editor.  These  are  equivalent  to  the  shortcut  buttons  introduced 

Adobe  GoLive  Menus  above. 

Outline  Editor  commands  in  the  Special  menu  include: 

• New  HTML  Tag 

• New  HTML  Text 

• New  HTML  Comment 

• New  HTML  Attribute 

• Toggle  Binary 

The  menu  below  shows  the  location  of  the  Outline  Editor  menu  com- 
mands. For  more  details  and  instructions  on  usingthese  commands, 
see  the  section  Editing  EiTML  Code  in  the  Outline  View  starting  on 
page  518. 


Outline  Editor  Commands 
in  the  Special  Menu 


These  commands  are  only  available  in  the 
outline  mode. 


Special 


i Link 

S€L 

Remoue  Link 

•*S*L 

Rdd  to  Keywords 

Start  Tabulator  Indexing 

*^3§T 

Show  in  Default  Browser 

8§T 

Show  in  Browser 

► 

Web  Database... 

Web  Database 

► 

Check  Syntax 

New  HTML  Tag 

New  HTML  Text 

f>8§T 

New  HTML  Comment 

03§C 

New  HTML  Attribute 

Toggle  Binary 

08€B 

Edit  WebObjects  Source 

Collapse  Rll  Containers 
Expand  Rll  Containers 

Document  Statistics... 

Note  that  many  of  the  Layout  editor  menu  commands  are 
dimmed  after  you  open  a document  with  the  Outline  Editor. 
Conversely,  all  Outline  Editor  commands  will  be  dimmed  when 
you  open  a document  in  Layout  mode. 


User  Profiles  If  you  are  a seasoned  HTML  programmer,  you’ll  find  that  the  Outline 

Editor’s  structured  view  lets  you  tweak  and  adjust  the  underlying 
HTML  code  with  utmost  ease.  So,  after  completing  the  layout  of  your 
Web  page  in  Layout  mode,  you  can  use  the  Outline  Editor  to  check 
the  structure  of  your  HTML  code  and  fine-tune  it — for  example,  by 
adding  custom  attributes. 
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Using  the  Outline  Editor 


If  you  are  a novice,  the  Adobe  GoLive  Outline  Editor  gives  you  a close 
look  at  the  “nuts  and  bolts”  of  HTML.  However,  unlike  many  other 
products,  you  won’t  have  to  deal  with  raw  HTML  code.  Instead,  the 
Outline  Editor  will  guide  you  through  a structured  view  of  your  Web 
page,  helping  you  to  learn  and  understand  the  rules  of  Web  page  de- 
sign much  faster  and  easier. 


Launching  the 
Outline  Editor 


Click  the  Outline  tab  rider  in  the  document  window  to  launch  the 
Outline  Editor. 


Although  launching  the  Outline  Editor  may  completely  disable 
the  Layout  mode  and  dim  all  Layout  menu  commands,  it  will 
not  change  the  HTML  code  in  your  file  (except  for  removing  ex- 
cess whitespace). 


Creating  a New  Web  Page 

SI 


To  build  a Web  page  from  scratch,  proceed  as  follows: 

1 Choose  the  New  command  from  the  file  menu.  A new  document 
named  “untitled”  will  appear. 

2 Click  the  Outline  tab  in  the  document  window  to  open  the  Out- 
line Editor. 

The  outline  view  displays  a basic  HTML  file  structure,  complete  with 
the  basic  HEAD  and  BODY  container  tags  and  already  expanded.  You 
can  use  this  structure  as  a template  and  fill  it  with  your  own  content. 


Outline  Editor  - 

New  Document  in  Outline  View 


Click  this  tab  to  switch  to  the  outline  view. 


Click  this  triangle  control  to  expand  or  collapse 
the  entire  HTML  outline  view  one  tag  at  a time. 


j 
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While  editing  HTML  code,  you  can  expand  or  collapse  any  tag  in  the 
outline  view  by  clicking  the  collapse/expand  triangle  control  to  the 
left  of  the  tag  name.  This  triangle  control  functions  as  an  outline 
view  control  that  allows  you  to  show  or  hide  parts  of  or  all  of  the  en- 
tire structure.  In  the  example  shown  above,  clicking  the  triangle  con- 
trol of  the  HTML  tag  would  collapse  the  outline  view  completely, 
hiding  the  head  and  body  sections  from  view. 


Opening  an 
Existing  Web  Page 


To  open  an  existing  Web  page,  proceed  as  follows: 

1 Select  the  Open  command  from  the  File  menu,  then  choose  the 
desired  file  in  the  subsequent  file  selection  dialog  box. 

2 Click  the  Outline  tab  in  the  document  window  to  open  the  Out- 
line Editor. 

The  example  below  shows  an  existing  document  opened  in  the  Out- 
line Editor.  Documents  are  always  opened  in  a fully  expanded  out- 
line view,  so  you  can  edit,  insert,  and  delete  individual  tags.  For  more 
details  on  editing,  see  page  518. 


Outline  Editor  - Opening  an 
Existing  Document 


Click  this  tab  to  switch  to  the  outline  view. 


Click  this  triangle  control  to  expand  or  collapse 
the  HTML  outline  view  one  tag  at  a time. 


J 


To  streamline  the  view,  you  can  now  collapse  individual  tags  by  click- 
ing their  respective  triangle  controls. 
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To  return  to  the  initial  view,  proceed  as  follows: 

1 Collapse  the  entire  outline  view  by  clicking  the  triangle  control 
on  the  HTML  container  tag. 

2 In  the  collapsed  view,  Option-click  the  triangle  control  of  the 
HTML  tag  to  expand  the  HTML  outline  with  all  HTML  tags  open. 


Finding  Your  Way  The  Outline  view  consists  of  HTML  tags  arranged  to  reflect  the  hier- 

Through  the  Outline  archv of  v°ur  HTML document: 

View 


Outline  View  Controls  and  Display 
Elements 


Bounding  box  indicates  current  selection. 


Highest  level  in  HTML  tag  hierarchy. 


Indents  indicate  lower-level  tags. 


Vertical  lines  connect  start  and  end  tags. 


Drag  & drop  handle 


|v  title  » I 

Title 


/BODY 


/HTML 


Finding  Your  Way  Through  the  Outline  View 
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Structural  Elements 

The  Adobe  GoLive  Outline  Editor  uses  various  elements  to  display  the 

structure  of  an  HTML  document: 

• HTML  tags  appear  as  box  symbols. 

• Indents  indicate  the  HTML  hierarchy  levels.  The  example  above 
shows  the  basic  structure  of  an  HTML  document:  The  HEAD  and 
BODY  elements  are  indented  to  show  that  they  are  contained  in 
the  HTML  element.  The  HEAD  element  in  turn  contains  a TITLE 
element  with  a text  box. 

• Start  and  end  tags  are  connected  by  vertical  lines  to  show  that 
they  are  complementary  items. 

Controls 

Each  open  HTML  tag  has  various  controls  that  allow  you  to  rearrange 

the  sequence  of  tags  in  your  document,  add  content  to  your  Web 

page,  or  expand  and  collapse  your  document  view: 

• The  Drag  & Drop  Handle  on  the  left  side  of  the  box  lets  you  drag 
a tag  and  drop  it  on  any  location  in  your  document.  While  you 
are  dragging,  a horizontal  line  will  move  along  with  the  tag  to 
indicate  the  current  insertion  point.  You  can  move  tags  up  or 
down  the  structure  as  desired,  but  your  audience  will  only  see 
elements  that  the  body  section  of  your  page  contains. 

• The  Collapse/Expand  Triangle  control  to  the  left  of  the  HTM  L tag 
name  functions  as  an  outline  view  control.  Clicking  this  arrow 
expands  or  collapses  the  element,  showing  or  hiding  further  ele- 
ments that  it  contains. 

Clicking  this  triangle  control  while  holding  down  the  Option  key 
expands  or  collapses  the  entire  outline  view,  showing  or  hiding 
all  elements  contained  in  the  document. 

• The  HTML  Tag  Name  is  a text  box.  Clicking  at  the  tag  name  acti- 
vates the  box,  allowing  you  to  enter  a tag  name. 

Alternatively,  clicking  the  tag  name  while  holding  down  the 
Command  key  will  pop  up  a list  of  HTML  tags  to  choose  from. 
The  tags  appearing  in  the  popup  menu  represent  the  tag  inven- 
tory stored  in  the  Web  Database. 

• The  show/hide  attributes  triangle  control  to  the  right  of  the 
HTML  tag  name  shows  or  hides  the  attributes  defined  for  the 
selected  element. 
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Special  Display  Feature 

A black  border  highlights  selected  elements. 

Using  Navigation  Keys 

You  can  use  various  keyboard  equivalents  to  navigate  through  the 

Outline  view,  expand  or  collapse  selections,  and  edit  elements. 

• To  move  through  the  Outline  view,  use  the  arrow  keys.  The  up 
arrow  selects  the  item  above  the  current  selection,  and  the 
down  arrow  picks  the  one  below. 

• To  move  through  the  attribute  list  of  an  element,  use  the  arrow 
keys.  The  up  arrow  selects  the  item  above  the  current  selection, 
and  the  down  arrow  chooses  the  one  below. 

• To  expand  or  collapse  the  currently  selected  tag  element,  press 
Return.  Please  note  that  this  is  only  possible  with  binary  tags 
(tags  always  used  in  pairs). 

• To  recursively  expand  or  collapse  the  currently  selected  tag  ele- 
ment, press  Shift-Return.  Please  note  that  this  is  only  possible 
with  binary  tags. 

• To  show  the  tag  attribute  list,  press  Enter. 

• To  hide  the  tag  attribute  list,  press  Shift-Enter. 

• To  activate  the  next  text  box,  press  Tab.  To  activate  the  preceding 
text  box,  press  Shift-Tab. 

• To  delete  the  current  selection,  use  the  Backspace  key. 

• To  activate  the  tag  selection  popup  menu,  Command-click  the 
tag  name. 
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Usingthe  Palette  with 
the  Outline  Editor 

The  Basic  Tags  Tab  of  the  Palette 


Drag  & Drop  Insertion  of  a Plugin 


Drag  & drop  support  is  available  for  items  from  the  Basic  Tags  and 
Forms  tabs  of  the  Palette  (for  more  detail  on  basic  tags,  see  The  Pal- 
ette on  page  86  and  following). 


You  can  drag  frequently  used  elements  from  the  Palette  and  drop 
them  anywhere  in  your  Outline  Editor  window,  just  as  you  would  in 
the  Layout  mode. 

While  you  are  dragging,  a horizontal  line  will  move  along  with  the 
tag  to  indicate  the  current  insertion  point  (see  below). 


□ untitled.html  = 00 

Palette  m 

Layout  [Q  ] Source  [f]  [ FH  \ Preview  □ ) [B  ] 

□UsiHiniaiaiBi^i 

| V HTML  ► 

^ HEAD  ► 


META  » t>  ' HTTP-EQUIV  content- type 

META  > t>  ' NAME  generator 


: Welcorce  to  Adotie  GoLive 

/TITLE 
/HEAD 
T7  BODY  > 

/BODY 

/HTML 


J ^ 


After  inserting  a tag,  you  can  edit  its  attributes  using  the  text  boxes 
and  scrolling  lists  in  the  tag  elements. 

For  more  detail  on  editing  tag  attributes,  please  see  Editing  Tag  At- 
tributes on  page  519. 
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Using  the  Outline  Editor 


Editing  HTML  Code  in  the  There  are  several  dedicated  shortcut  buttons  on  the  Outline  Toolbar 
Outline  view  and  equivalent  Outline  Editor  commands  in  the  Special  menu.  When 

in  outline  mode,  you  can  use  these  commands  to  insert  tags,  edit- 
able text  boxes,  and  HTML  comments  into  your  document. 

You  can  also  add  new  attributes  to  your  tags  to  implement  non-stan- 
dard features  or  to  anticipate  upcoming  HTML  coding  conventions. 

Further,  you  can  toggle  between  the  unary  and  binary  tag  format — 
that  is,  you  can  determine  whether  or  not  a start  tag  should  be  ac- 
companied by  an  end  tag. 


Inserting  New  HTML  Tags  The  New  HTML  Tag  button  on  the  Outline  Toolbar  or  the  equiva- 
lent menu  command  inserts  a blank  HTMLtag  below  the  current  se- 
lection. 


Outline  Editor  Window  with 
Undefined  Tag 


New  HTMLtag 


The  following  example  shows  how  your  editor  window  may  look  af- 
ter inserting  a new  tag. 

T?  HTML  >J 
| |>  HEAP  ► 

T7  BODY  ► (>  ' TEXT  ■ •000000 
V HI  >J 

This  is  a header. 

/HI 

1 ????  ► | 

| This  is  default  text. 

/BODY 

/HTML 


Defining  Tag  Types 


You  should  now  define  the  type  of  the  new  tag  you  have  just  in- 
serted. You  may  either  enter  a tag  name  directly  or  select  one  from 
the  Web  Database. 

To  enter  a tag  name  directly,  proceed  as  follows: 

1 Click  the  text  box  with  the  four  question  marks  to  select  the  tag 
name. 

2 Enter  the  desired  HTML  tag  name  and  press  the  Return  key  to 
confirm  your  entry. 
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To  enter  tags  directly,  you  should  be  familiar  with  the  capabil- 
ities of  the  targeted  browser.  Bear  in  mind  that  unsupported 
tags  will  be  ignored  and  that  their  content  will  not  be  displayed 
by  the  browser.  If  you  are  not  completely  sure,  we  recommend 
the  following  method. 


To  use  a tag  from  the  Web  Database,  proceed  as  follows: 

1 Command-click  the  text  box  with  the  four  question  marks. 

2 This  will  pop  up  a list  with  HTML  tags  to  choose  from  (see  below). 

3 Keep  the  mouse  button  depressed  and  drag  through  the  popup 
menu. 


4  Release  the  mouse  button  on  the  tag  of  your  choice. 


Outline  Editor  Window  with  Popup  lag 
Selection  List 


Command-clicking  the  tag  name  opens  a tag  list. 


Editing  Tag  Attributes 


After  defining  the  tag  type,  you  may  want  to  define  tag  attributes  to 
fine-tune  the  appearance  of  your  Web  page. 

Attributes  control  the  way  a tag  is  displayed  by  the  browser.  Many 
tags  support  special  formatting  instructions,  such  as  element  align- 
ment, color,  and  directory  paths  to  resource  files. 

In  the  example  below,  the  BIOCKQUOTE  tag  is  used.  Any  text 
wrapped  into  this  tag  will  stand  out  as  a separate  block  of  text  on  the 
screen. 

To  define  an  attribute,  proceed  as  follows: 

1 Click  the  show/hide  attributes  triangle  control  to  pop  up  a list  of 
valid  tag  attributes  to  choose  from  (see  Defining  a Tag  Attribute 
on  page  520). 
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2 Select  the  desired  attribute  and  assign  a value.  The  tag  element 
box  will  expand  to  accommodate  the  new  attribute. 


Defining  a Tag  Attribute 


Click  the  show/hide  attributes  triangle  control 
to  pop  up  the  attribute  list. 


BLOCKQUOTE 

This  is  defadt  te 


Drag  through  the  popup  menu  to  select  the  de- 
sired attribute. 


I t>  blockquote  ► 

This  is  default  text. 


Click  this  triangle  control  to  pop  up  the  values 
list. 


/HI 

| *7  BLOCKQUOTE  ► ' ALIGN  ^ 

left 

This  is  default  text.  / 

Drag  through  the  values  list  to  select  the  desired 
value. 


/HI 

left 

/Center^ 
right  * 
justify 

V BLOCKQUOTE  ► ' ALIGN  ►/ 

This  is  default  text.  / 

Alternatively,  attributes  can  also  be  added  using  the  New  HTML  At- 
tribute button  S on  the  Outline  Toolbar  or  the  equivalent  menu 
command.  A detailed  description  of  this  option  appears  on 
page  523. 


Inserting  Text 


The  New  HTML  Text  button  on  the  Outline  Toolbar  or  the  equiv- 
alent menu  command  inserts  a blank  text  box  below  the  current  se- 
lection. 


To  type  in  text,  proceed  as  follows: 

Click  the  four  highlighted  question  marks  servingas  placeholders 
and  type  to  overwrite.  The  text  wraps  automatically  at  the  border 
of  the  text  box. 
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The  example  below  shows  how  your  editor  window  may  look  after 
inserting  a new  text  box. 


Outline  Editor  Window 
with  New  Text  Box 


New  text  box 


If  you  temporarily  stop  entering  text  and  deselect  the  text  box,  you 
may  later  resume  your  work  by  placing  the  cursor  at  the  location 
where  you  stopped. 


Inserting  Comments 


Comments  give  useful  hints  for  editing  documents  at  later  dates — 
for  example,  if  you  intend  to  embed  advanced  features  that  require 
significant  background  information. 

Because  comments  are  skipped  by  the  browser  when  interpreting 
HTML  code  and  building  the  page  display,  they  can  be  placed  any- 
where in  your  document,  even  outside  of  the  HTML  container  tag. 

To  insert  a comment,  proceed  as  follows: 

Choose  the  New  HTML  Comment  button  jeJ  on  the  Outline  Tool- 
bar or  the  equivalent  menu  command  from  the  Special  menu  to 
insert  a blank  comment  text  box  below  the  current  selection. 

Alternatively,  you  can  insert  the  Comment  icon  from  the  Palette: 

Drag  the  Comment  icon  from  the  Palette  and  drop  it  in  your  doc- 
ument. While  you  are  dragging,  a horizontal  line  will  movealong 
with  the  icon  to  indicate  the  current  insertion  point. 
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To  type  in  text,  proceed  as  follows: 

Click  the  four  highlighted  question  marks  (which  serve  as  place- 
holders) and  type.  The  text  wraps  automatically  at  the  border  of 
the  text  box. 


Outline  Editor  Window  with  New 
Comment  Text  Box 


New  comment  text  box 


The  example  below  shows  how  your  editor  window  may  appear  after 
inserting  a new  comment  text  box. 


□ ■ 


Air  Baja 


Layout  □ ] fR  j Source  PH  f [^0  GUl 


□ | Hi 


HH 


Escapes 

/TITLE 


META  ► > 'NAME  GENERATOR 
META  ► > ' HTTP-EQU IV  ► contend  type 

/HEAD 


V BODY  _>J 

V FONT  ► ' COLOR  □ *FF66FF 


|T7  TABLE  ► |>  ' COOL 

::|T7  r ■— ^HT 48  I 


The  following  shows  what  comments  in  your  document  look  like  af- 
ter editing. 


Outline  Editor  Window  with  Comments 


Comment  text  box  after  editing 


□ 

Air  Baja  Bl 

Layout 

m]  rn]  Source  [f]  [w]]  Preview  □ ] fR  ) 

% 

V MILE.  W | 

:|  Escapes 

/TITLE 

META  ► > ' NAME  GENERATOR 

: i|  META  ► > ' HTTP-EQU  IV  ► contend  type 

/HEAD 

V BODY  ► 

1^  FONT  ► ' COLOR  □ *FF66FF 

1"  1 1 have  used  magenta  for  this  header  to  make  it  stand  out.|  j 

i|v  TABLE  ► > ' COOL 

T’  TR  ► , 1 ■•'iHT  48 

Although  they  appear  dimmed,  comments  remain  selectable 
and  editable.  To  edit  an  existing  comment,  simply  click  the 
comment  text. 


Using  the  Palette  with  the  Outline  Editor 


523 


Inserting  Attributes 


The  Outline  Editor  allows  you  to  add  and  edit  tag  attributes. 

Attributes  control  the  way  a tag  is  displayed  by  the  browser.  Many 
tags  support  special  formatting  instructions,  such  as  element  align- 
ment, color,  and  directory  paths  to  resource  files. 

To  add  a new  tag  attribute,  proceed  as  follows: 

1 Select  the  tag  you  wish  to  add  an  attribute  to. 

2 Choose  the  New  HTML  Attribute  button  EIEI  on  the  Outline  Tool- 
bar or  the  equivalent  menu  command  from  the  Special  menu.  A 
blank  attribute  appears  below  the  other  tag  attributes. 


3 Type  an  attribute  name  into  the  text  box.  Press  the  Return  key  to 
confirm  your  entry.  The  example  below  shows  how  the  body  tag 
in  your  document  structure  may  look  after  adding  a new  at- 
tribute. 


Body  Tag  with  Unnamed  Attribute 


New  Attribute  (unnamed) 


V HTML  ► 


HEAD  ► 


> BODY  ► V ' BGCOLOR  □  *  *FFFFFF 

' TEXT  ■ *000000 

* LINK  □ *FF5000 

' VLINK  □ *005F86 


HI????  ~ 


/HTML 


a If  you  are  not  sure  whether  an  attribute  is  valid  or  not,  consult 
the  World  Wide  Web  Consortium’s  (W3C)  Web  site  at  the  follow- 
ing address:  http://www.W3.org 

4 Click  the  text  box  to  the  right  of  the  name  field,  type  in  a value, 
and  press  the  Return  key  to  confirm  your  entry. 
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Body  Tag  with  Named  Attribute 


New  Attribute  Value 


Body  Tag  with  New  Color  Attribute 


Click  this  box  to  open  the  Color  Palette. 


V HTML  ► 


t>  HEAP  » 

t>  BODY  ► ^7  ' BGCOLOR  □ *FFFFFF 

' TEXT  ■ *000000 

' LINK  □ *FF5000 

r VLINK  □ *005F86 


NEW  ATT 


newal| 


/HTML 


Tag  Attribute  Examples 

The  two  examples  below  show  what  the  BODY  tag  in  your  document 
structure  may  look  like  after  defining  the  newly  added  attribute.  If 
the  attribute  is  valid,  a color  box,  path  pointer,  or  similar  symbol  ap- 
pears to  the  right  of  the  attribute  name. 

If  Color  is  the  new  attribute,  such  as  the  color  of  the  active  link  shown 
below,  a color  box  and  the  Web  color  code  appear  beside  the  at- 
tribute name.  Clicking  the  color  box  will  open  the  Color  Palette. 


^7  HTML  ► 

(>  HEAD  ► 

t>  BODY  ► ^ ' BGCOLOR  □ *FFFFFF 

' TEXT 

■ *000000 

' LINK 

□ *FF5DOO 

' VLINK 

□ *005FG6 

' ALINK 

Ll]  *204000 

/HTML 

If  path  is  the  new  attribute,  such  as  the  directory  path  to  the  back- 
ground image  shown  below,  a path  pointer  appears  beside  the  at- 
tribute name. 
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Body  Tag  with  New  Path  Attribute 


Click  this  path  pointer  to  pop  up 
a file  selection  dialog. 


This  is  the  directory  path  to  the 
selected  background  image. 


Clicking  this  path  pointer  will  open  a file  selection  dialog  box,  allow- 
ing you  to  choose  a background  image  file. 


^7  HTML 

| > HEAD  ► 


:|  l>  BODY  ► V • TEXT 

■ *000000 

' LINK 

[]  *ffsdoo 

' VLINK 

□ *OOSF86 

' BGCOLOR 

□ *3B44CC 

' BACKGROUND 

♦ Nev  Example /Background. GIF 

/HTML 


Toggling  the 
Binary  Format 


Title  Tag  with  Binary  Format 
Toggled  On  and  Off 


The  Toggle  Binary  button  ©]  on  the  Outline  Toolbar  or  the  equiva- 
lent menu  command  toggles  the  binary  tag  format  on  and  off.  This 
command  allows  you  to  determine  whether  a new  tag  should  have 
a complementary  end  tag  or  not. 

Most  HTML  tags  are  binary  tags,  or  container  tags.  Binary  tags 
enclose  their  content  in  a pair  of  tags,  referred  to  as  start  and 
end  or  open  and  close  tags. 

A few  tags,  however,  do  not  need  an  end  tag;  these  are  called 
unary  tags.  One  of  the  most  frequently  used  unary  tags  is  the 
IMG  tag  for  embedding  images. 

The  example  below  shows  the  effect  of  toggling  the  binary  tag  for- 
mat on  and  off. 


V NEVTAG  ► 

/NEVTAG 

Binary  format  toggled  on 


NEVTAG  ► 
/HTML 


Binary  format  toggled  off 
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General 


The  Source  Editor  Screen 


Using  the  Source  Editor 

This  chapter  describes  the  basic  functionality  of  the 
Adobe  GoLive  Source  Editor,  explains  its  interaction  with 
the  Palette,  provides  information  on  selected  buttons 
and  equivalent  menu  commands,  and  discusses  how  to 
edit  Web  pages  in  Source  mode.  You  should  be  familiar 
with  the  contents  of  this  chapter  before  starting  to  edit 
HTML  code  in  Source  mode. 


The  Adobe  GoLive  Source  Editor  is  a convenient  text-oriented  Web 
page  editor  that  makes  your  Adobe  GoLive  Web  publishing  package 
complete. 

The  Source  Editor  adds  more  than  basic  HTML  editing  functionality  to 
Adobe  GoLive.  It  allows  you  to  view  your  document’s  HTML  source 
code,  check  the  HTML  syntax,  fine-tune  your  code,  or  even  build  Web 
pages  from  scratch. 

A typical  Source  Editor  screen  appears  below. 


The  powerful  features  of  the  Source  Editor  supply  valuable  assistance 
to  the  HTML-savvy  user.  Syntax  highlighting,  drag  & drop,  and  other 
tools  ensure  that  HTML  source  code  editing  is  accurate  and  painless. 
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Basic  Features 


Using  the  Source  Editor 


We  designed  the  Adobe  GoLive  Source  Editor  with  the  seasoned  HTML 
programmer  in  mind. 

If  you  are  a seasoned  HTML  programmer  with  a good  working 
knowledge  of  Hypertext  Markup  Language  and  have  been  using 
other  text-oriented  HTML  editors,  you’ll  find  the  Source  Editor  very 
useful  for  tweaking  and  fine-tuning  the  underlying  HTML  code. 

After  completing  the  layout  of  your  Web  page  in  Layout  mode,  you 
may  want  to  use  the  Source  Editor  to  check  the  structure  of  your 
HTML  code  and  make  minor  corrections,  if  necessary.  You  can  use 
the  Source  Editor  to  your  advantage  to  add,  for  example,  custom 
attributes  or  to  edit  string  values. 


After  you  click  the  Source  tab  of  the  document  window  to  activate  the 

Source  Editor,  you’ll  find  that  its  editing  functionality  resembles  that 

of  any  other  HTML  text  editor  for  the  Macintosh: 

• You  can  create  a new  document  within  the  Source  Editor  by 
choosing  the  New  command  from  the  File  menu.  A blank  win- 
dow will  open  on  the  screen,  allowing  you  to  type  or  paste  text 
from  another  document  or  application  or  insert  text  clippings 
from  the  Finder. 

• Once  you  have  done  some  basic  editing,  you  can  save  your  new 
document  using  the  Save  command  from  the  File  menu. 

• You  can  also  open  an  existing  Adobe  GoLive,  HTML,  or  text  docu- 
ment using  the  Open  command  from  the  File  menu. 

• Typing  inserts  characters  at  the  insertion  point,  which  is  dis- 
played as  a blinking  vertical  bar.  The  first  typed  character 
replaces  selected  text,  and  the  insertion  point  follows  the  first 
typed  character. 

• The  default  highlight  color,  selected  in  the  Appearance  control 
panel,  highlights  selected  text  in  the  active  window. 

• As  you  type,  the  Source  Editor  scrolls  the  window’s  contents  hori- 
zontally or  vertically  so  that  the  insertion  point  is  visible. 


Text  Formatting 
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Text  Formatting 


Source  Editor  Text  Formatting  Commands 
in  the  Edit  Menu 


3 
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The  Source  Editor  allows  you  to  apply  the  basic  text  formatting  com- 
mands from  the  Format  and  Style  menus  (see  The  Style  and  Format 
Menus  on  page  123  for  reference)  to  selected  text  in  the  body  of  your 
page. 

The  following  screenshots  show  the  text  formatting  commands  avail- 
able in  the  Format  and  Style  menus. 


Format 


✓ None  ^ 


Header  1 r\ 

Header  2 

Header  3 

Header4 

Header  5 

Header  6 

Address 

Preformatted  1 

Alignment 

► 

List 

if 

Style 


✓ Plain  Text  0*P 


Italic 

0*1 

Underline 

o*u 

Strikeout 

0*A 

Superscript 

o*+ 

Subscript 

o*- 

Teletype 

0*T 

Blink 

Structure 

► 

Size 

► 

Font 

► 

Nobreak 

To  format  a paragraph  in  Source  mode,  proceed  as  follows: 

1 Triple-click  the  paragraph  to  highlight  it. 

2 Go  to  the  Format  menu  and  choose  the  paragraph  style  that  you 
want. 

To  format  selected  text  in  Source  mode,  proceed  as  follows: 

1 Double-click  the  text  to  highlight  a single  word,  or  click  and  drag 
to  highlight  more  text. 

2 Go  to  the  Style  menu  and  pick  the  character  style  that  you  want. 
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Syntax  Highlighting  Syntax  highlighting  works  in  the  background,  continuously 

monitoring  user  input  and  comparing  it  with  the  content  and  rules 
specified  in  the  Web  Database. 

When  the  syntax  highlighting  feature  recognizes  a tag,  it  highlights 
the  start  and  end  tags  and  tag  attributes  to  indicate  that  the  syntax 
is  complete. 


Syntax  Highlighting 
in  the  Source  View 

These  buttons  provide  convenient  shortcuts  for 
controlling  syntax  highlighting. 

The  default  color  for  HTML  tags  is  blue. 


The  default  color  for  tag  attribute  values  is 
brown. 


The  default  color  for  visible  content  is  black. 


FrequentTrauelersDept.html 


SB 


mi  mi 
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cflETfi  HTTP-EQUTO^ "content- type"  CONTENT*"  text/htm  I ; charset=  i so-8859- 1 
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A niche  for  business  and  pleasure  travelers  who  spend  much  of 
their  time  on  the  move,  the  Frequent  Travelers  department  offers 
the  expertise  of  frequent  flyer  guru  Peter  Smith's  Frequent  Flyer 
serv i ces  and  inside  tips  f rom  i nves t i ga t i ve  repor ter  Jody  Ro thch i I d . 
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in  travel  in  the  past  year,  find,  once  again,  there  has  been  no 
shortage  of  candidates.  <P> 
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Syntax  highlighting  uses  eleven  different  colors  to  visually  separate 
tags,  attributes,  and  document  content,  making  it  easy  for  authors  to 
keep  track  of  their  HTM  L code.  An  example  of  highl  ighted  HTM  L code 
appears  above. 

The  five  syntax  highlighting  control  buttons  and  the  Soft  Wrap  but- 
ton above  the  editor  text  box  provide  convenient  shortcuts  for  often- 
used  commands: 


Button 


Function 


U 


The  Turn  syntax  highlightingoff  button  deactivates  syntax  highlighting,  showing  the 
HTML  source  code  in  the  default  text  color  selected  in  the  Preferences  - Source  - 
Colors  dialog  box  (see  Syntax  Highlighting  Preferences  on  page  544). 


yi 

Tc  J 


The  Detailed  syntax  highlighting  button  activates  syntax  highlighting.  The  default 
appearance  of  the  individual  HTML  objects  is  controlled  by  settings  made  in  the 
Preferences  - Source  - Colors  dialog  box  (see  Syntax  Highlighting  Preferences  on 
page  544). 

The  Highlight  Media  & Links  button  highlights  images  and  media  items  only,  using 
the  colors  selected  in  the  Preferences  - Source  -Colors  dialog  box  (see  Syntax  High- 
lighting Preferences  on  page  544). 


The  Highlight  URLs  button  highlights  references  to  other  pages  and  locations  on  the 
Web,  using  the  colors  selected  in  the  Preferences  - Source  -Colors  dialog  box  (see  Syn- 
tax Highlighting  Preferences  on  page  544). 


Th  eSoftwrap  button  toggles  the  wrapping  of  the  source  at  the  margin  of  th  eSource 
editor  window  on  and  off. 


Syntax  Checking 
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Syntax  Checking 


Syntax  Checking  in  the  Source  View 


The  error  log  identifies  HTML  tags  or  attributes 
with  errors. 


The  syntax  checker  has  found  a potentially  in- 
valid tag. 


Syntax  checking  ensures  that  your  Web  pages  contain  only  valid  and 
error-free  code.  The  built-in  syntax  checker  parses  your  HTML  code 
against  the  coding  rules  stored  in  the  Web  Database  and  highlights 
code  elements  presumed  faulty.  You  can  select  a set  of  rules  that  you 
want  applied  to  syntax  checking  in  the  HTML  Versions  dialog  box  in 
the  Source  preferences  (see  page  542). 


Foursyntax  checking  buttons  arranged  above  the  editor  text  box  pro- 
vide convenient  shortcuts  for  checking  syntax: 

Button  Function 

The  triangle  control  opens  and  closes  the  error  log  section  of  th e Source  Editor  win- 
dow. It  opens  automatically  when  the  syntax  checker  detects  faulty  HTML  code. 


The  Check  Syntax  button  launches  syntax  checking,  which  highlights  errors  and  in- 
complete HTML  tags  as  it  verifies  the  page  line  by  line. 


C®3 2 
IZ3 1 


When  enabled,  the  Display  Errors  button  and  the  error  counter  next  to  it  show  the 
number  of  syntax  errors  in  the  page. 


When  enabled,  the  Display  Warnings  button  and  the  error  counter  next  to  it  show 
the  number  of  faulty  links  in  the  page. 


Additionally,  a browser  compatibility  menu  in  the  Source  Editor  in- 
teracts with  the  syntax  checker  to  let  you  pinpoint  which  tags  and  at- 
tributes are  not  supported  by  a given  set  of  browsers  or  are  specific 
to  Adobe  GoLive.  When  you  make  a selection  and  launch  syntax 
checking,  an  incompatibility  list  appears  in  the  error  log,  detailing 
potential  problems.  The  browser  combinations  on  this  menu  are  sup- 
plied by  the  Preferences  - Source  - Browser  Sets  dialog  box  (see 
page  542),  which  also  lets  build  your  own  browser  sets. 
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Drag  & Drop  Support 


Drag  & Drop  Insertion  of  a Line  Tag 


While  you  are  dragging,  the  cursor  moves  along 
the  margin  to  indicate  the  current  insertion 
point. 


Using  the  Source  Editor 


To  launch  the  syntax  checker,  proceed  as  follows: 

1 Click  the  Check  Syntax  button  or  choose  the  Check  Syntax  com- 
mand from  the  Special  menu. 

2 The  syntax  checker  highlights  the  first  code  element  presumed 
faulty.  (If  it  doesn’t  highlight  anything,  your  HTML  code  is  cor- 
rect.) 

3 Click  the  Display  Errors  button  and  check  the  error  log  above  the 
main  window  area  to  learn  more  about  the  errors  found. 

4 Click  each  entry  in  the  error  log  to  let  Adobe  GoLive  highlight  the 
faulty  code  element  in  the  main  window  area. 

5 Hand-edit  and  correct  each  error,  then  launch  syntax  checking 
one  more  time  to  make  sure  that  all  errors  have  been  found. 


Drag  & drop  insertion  is  available  for  Basic  and  Forms  tags  from  the 
Palette  as  well  as  text  clippings  from  the  Finder  or  any  other  software 
that  supports  Macintosh  drag  & drop. 

The  following  screenshot  illustrates  the  drag  & drop  insertion  of  a 
line  tag  from  the  Palette. 


^ File  Edit  Style  Format  Special  Site  Window  Hilfe 
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The  Source  Editor  lets  you  drop  Palette  items  in  the  flow  of  your  HTML 
code  and  use  them  as  editable  tag  templates. 

After  inserting  a tag,  you  can  edit  its  attributes  and  attribute  values 
while  the  Source  Editor  monitors  your  input  and  highlights  typing 
errors  or  incomplete  syntax. 

Drag  & drop  coloring  is  also  supported.  You  can  drag  a color  from  the 
preview  pane  of  the  Color  Palette  (see  Coloring  Text  and  Objects  on 
page  500)  and  drop  it  on  selected  items  in  your  HTML  code. 
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Further  drag  & drop  options  include  pages  and  URLs  from  the  Site 
Window.  Dropping  a page  or  URL  icon  creates  a link  instantly,  refer- 
encing the  page  or  URL  you  have  dropped. 


Using  Text  Macros 
with  Source  Code 
Editors 


Text  macros  are  a power  tool  designed  for  frequent  users  of  the 
HTML,  JavaScript,  and  WebObjects  source  code  editors  built  into 
Adobe  GoLive.  They  let  Web  authors  automate  source  code  insertion, 
doing  away  with  the  need  to  type  (or  copy  and  paste)  lengthy  strings 
of  source  code  for  often-used  tags  and  script  elements. 

Text  macros  are  stored  in  four  user-editable  files,  which  reside  in  a 
special  Text  Macros  subfolder  within  the  Modules  folder  in  the  Adobe 
GoLive  program  folder: 

• The  Default.macro  file  can  hold  any  combination  of  HTML  tags, 
JavaScript  strings,  and  WebObjects  code  snippets.  These  objects 
can  be  inserted  into  any  of  Adobe  GoLive’s  editor  windows.  This 
file  is  Adobe  GoLive’s  default  repository  for  text  macros. 

If  desired,  you  can  store  your  own  macros  in  three  extra  environ- 
ment-specific files  for  Adobe  GoLive’s  source  code  editors: 

• The  HMTL  Source. macro  file  can  hold  text  as  well  as  HTML  tags. 
These  macros  can  be  inserted  into  the  HTML  source  code  dis- 
played in  the  Source  tab  of  Adobe  GoLive’s  document  window. 

• The  JavaScript  Source. macro  file  holds  prefabricated  strings  of 
JavaScript  code.  These  tags  can  be  inserted  into  the  JavaScript 
source  code  displayed  in  the  JavaScript  editor. 

• The  WebObjects  Source. macro  file  holds  snippets  of  WebObjects 
code.  These  code  snippets  can  be  inserted  into  the  WebObjects 
source  code  displayed  in  the  WebObjects  declaration  editor. 

All  text  macro  files  are  loaded  when  Adobe  GoLive  starts  up  to  make 
them  available  throughout  the  application.  The  HMTL  Source. macro, 
JavaScript  Source. macro,  and  WebObjects  Source. macro  files,  how- 
ever, are  only  loaded  if  the  appropriate  program  modules  are  en- 
abled in  the  Modules  Manager. 

Inserting  Text  Macros  into  the  Source  Code 

Automated  source  code  insertion  is  accomplished  by  typing  the 
macro  name  and  pressing  the  keyboard  shortcut  Command-M.  This 
inserts  the  text  macro  identified  by  the  word  behind  or  below  the 
text  cursor,  provided  it  exists  in  the  default  source  macro  file  or 
source  macro  file  for  the  editor  you  are  currently  using. 
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Text  macros  are  case-insensitive,  which  means  that  you  can  enter 
their  names  in  lowercase  or  uppercase  characters,  or  any  combina- 
tion of  lowercase  and  uppercase,  if  desired. 

Defining  Text  Macros 

You  define  text  macros  by  opening  the  desired  source  macro  file  with 
Adobe  GoLive  or  a text  editor,  then  type,  copy  and  paste,  or  drag  & 
drop  the  approriate  code.  Text  macro  definitions  must  have  the  fol- 
lowing basic  format: 

MacroName  [Delimiter ] MacroContent [Delimiter] 

The  first  element  in  a macro  definition  is  the  macro  name  you  enter 
in  the  respective  editor  before  pressing  Command-M.  With  the  ex- 
ception of  spaces  and  tabs,  you  can  use  any  combination  of  charac- 
ters for  a macro  name,  but  you  should  restrict  yourself  to  using 
letters  and  digits.  The  three  source  code  editors  differ  in  what  they 
regard  as  self-contained  words.  Forexample,  usinga  dollar  sign  ("$") 
in  a macro  name  might  work  alright  in  the  HTML  Source  editor  but 
will  surely  fail  in  the  JavaScript  editor  because  this  character  is  an 
integral  part  of  the  JavaScript  syntax. 

Separated  by  a space  character,  the  second  element  specifies  the 
content  of  the  macro,  that  is,  the  text  that  is  actually  inserted  after 
you  type  the  macro  name  and  press  Command-M.  The  content  ele- 
ment must  be  enclosed  in  two  identical  or  complementary  delimiter 
characters.  When  you  prompt  Adobe  GoLive  to  insert  a text  macro, 
the  macro  interpreter  will  regard  thefirst  character  after  the  separat- 
ing whitespace  as  thedelimiterand  lookforan  identical  characterto 
determine  where  the  content  ends. 

For  example,  an  image  tag  macro  with  basic  attributes  could  look 
like  this: 

image  «<img  "src= .. /GIFS/???  . GIF"  width=,,20" 
height ="  2 0 "»> 

You  can  also  use  a text  macro  to  insert  a string  of  formatted  text. 
Here  is  an  example: 


webdesign  $This  Web  Site  was  designed  using  <B>Adobe 
GoLive. </B>$ 
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Using  Delimiters 

As  already  indicated  in  the  preceding  section,  delimiters  tell  Adobe 
GoLive’s  text  macro  interpreter  where  the  content  of  a text  macro 
starts  and  ends.  You  can  use  any  character  as  a delimiter,  as  long  as 
you  heed  one  basic  rule:  The  delimiter  may  not  occur  in  the  macro 
content  itself.  You  can  even  use  whitespace  and  carriage  returns  to 
insert  structured  text  and  multi-line  code,  respectively. 

Let  us  resume  the  "image"  example  from  the  preceding  section  to 
illustrate  the  proper  usage  of  delimiters.  The  macro  content  is  en- 
closed in  leftand  right  angle  quotes,  which  are  neither  used  in  HTML 
nor  JavaScript  nor  WebObjects  source  code. 

Here  is  an  example  of  improper  delimiter  usage: 

image  "<img  "src= .. /GIFS/??? . GIF"  width="20" 
height =" 20 ">" 

This  macro  definition  won’t  produce  a usable  result  because  it  uses 
double  quotes  as  delimiters.  The  double  quotes  are  already  used  to 
enclose  tag  attributes  in  the  HMTL  tag  definition,  so  Adobe  GoLive 
will  only  insert  the  text  before  the  second  double  quote  character. 
The  result  would  be: 

image  "<img 


As  a general  rule  of  thumb,  you  should  refrain  from  using  char- 
acters that  are  typically  used  as  structural  elements  within  the 
source  code  syntax,  for  example  the  "less  than"  (<)  and  "great- 
er than"  signs  (>)  enclosing  HTML  tags. 

Automating  Insertion  Point  Placement  and  Text  Selection 

Normally,  when  inserting  a text  macro,  Adobe  GoLive’s  text  macro 
tool  selects  the  entire  insert.  To  ensure  a smoother  workflow,  howev- 
er, you  can  also  place  the  insertion  point  or  select  text  for  overtyping 
anywhere  in  the  insert. 

Placing  the  insertion  point  in  an  insert  is  accomplished  by  adding  a 
"vertical  bar"  character  ("  | ").  Here  is  an  example: 

image  «<img  ,,src=|"  width="20"  height="20 ">"» 

The  vertical  bar  after  the  src  attribute  and  "equal  to"  sign  places 
the  insertion  point  so  you  can  enter  the  attribute  value  without  hav- 
ing to  move  the  cursor  to  the  desired  location. 
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Selecting  text  for  overtyping  is  accomplished  by  enclosing  a place- 
holder word  or  string  in  single  quotes  Here  is  an  example: 

image  «<img  " src= .. /GIFS/ '???'. GIF  " width="20" 
height =" 20 ">"» 

The  three  question  marks  enclosed  in  quotes  will  be  selected  when 
you  insert  this  example  macro,  allowing  them  to  be  overtyped  with- 
macro  name  "C"  instead. 

Calling  a Macro  from  within  a Macro 

To  reduce  overall  typing  work  and  make  your  macro  files  easier  to 
maintain,  Adobe  GoLive’s  text  macro  tool  lets  you  reference  other 
macros  from  within  a macro. 

To  call  another  macro  from  within  a macro,  you  need  to  enclose  the 
name  of  that  macro  in  dollar  signs  ("$").  The  following  example 
shows  the  proper  syntax: 

Macro  #1: 

meta-author  «<META  NAME=" author"  CONTENT=" $author$ "» 

Macro  #2: 

author  "Michael  Daeumling" 

Upon  insertion  of  the  meta-author  macro,  Adobe  GoLive  will  au- 
tomatically look  for  the  second  macro  named  "author"  and  insert  its 
content  at  the  specified  location  in  the  first  macro,  so  the  resulting 
text  insert  would  read: 

meta-author  <META  NAME= "author"  CONTENT="  Michael 
Daeumling" 

If  calling  a second  macro  produces  uneexpected  results,  this  may  be 
due  to  a circular  reference.  Circular  references  occur  if  the  second 
macro  contains  a reference  back  to  the  macro  called  in  the  first 
place.  The  text  macro  tool  handles  those  circular  references  grace- 
fully without  entering  an  endless  loop.  Rather  than  that,  it  will  sup- 
press the  circular  reference  and  insert  the  macro  name  found  at  the 
beginning  of  the  macro  definition. 

Here  is  a simple  example: 

A "A  to  $B$ " 

B "B  to  $C$" 

C "B  to  $A$ " 
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The  resulting  text  insert  would  read: 

A to  B to  C 

As  can  be  seen  from  the  above  example,  Adobe  GoLive  ignores  the 
circular  reference  pointing  back  to  macro  "A"  and  inserts  the  macro 
name  "C"  instead. 

Using  Keywords  as  Substitutes  for  Control  Characters 

As  outlined  in  the  preceding  sections,  you  can  use  three  control  char- 
acters to  specify  what  happens  when  a text  macro  is  inserted: 

• Single  quotes  mark  out  a selection. 

• The  vertical  bar  places  the  insertion  point. 

• Dollar  signs  are  used  to  reference  another  text  macro. 

Now  and  then,  syntax  rules  may  require  that  you  insert  a macro  with 
any  of  those  characters  in  it.  For  example,  JavaScript  syntax  requires 
that  text  strings  be  enclosed  in  single  quotes.  This  conflict  is  solved 
by  substituting  percent  signs  (or  any  other  suitable  character)  for  sin- 
gle quotes.  Adobe  GoLive’s  text  macro  tool  has  three  built-in  key- 
words allow  you  to  redefine  control  characters: 

• SELECTION  lets  you  redefine  the  selection  markers  if  single 
quotes  are  not  allowed.  Here  is  an  example: 

Selection  = % 

write . document . write ( ' %what% ' ) 

• CARET  lets  you  redefine  the  insertion  point  marker  if  the  vertical 
bar  is  not  allowed — for  example  because  it  is  used  to  express  a a 
bitwise  OR  operation  in  JavaScript. 

CARET  = % 

• MACRO  lets  you  redefine  the  dollar  signs  enclosing  a macro 
name. 


MACRO 
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Source  Editor 
Preferences 


The  Source,  Browser  Sets,  Colors,  Fonts,  and  Printing  dialog  boxes  in 
the  Source  Preferences  options  let  you  customize  various  basic  set- 
tings that  influence  the  behavior  of  the  HTML  syntax  checker  and  ap- 
pearance of  HTML  code  in  the  Source  Editor. 

To  open  any  of  the  Preferences  - Source  dialog  boxes,  proceed  as  fol- 
lows: 

1 Go  to  the  Edit  menu  and  choose  Preferences. 

2 Locate  and  click  the  Source  icon  in  the  scrolling  sidebar  to  open 
the  General  dialog  box. 

3 Click  the  triangle  control  to  expand  the  Source  options. 

4 Click  the  Colors,  Fonts,  or  Printing  entry  to  open  the  desired  dia- 
log box. 


General  Settings  The  settings  in  the  first-level  Source  dialog  box  let  you  enable  or  dis- 

able drag  & drop  support  and  control  how  HTML  code  appears  in  the 
main  window  area  of  the  Source  Editor. 


Selecting  General  Source  Preferences 

Use  this  checkbox  to  toggle  drag  & drop  on 
and  off. 

Use  this  checkbox  to  toggle  the  relaxed  checking 
of  special  characters  on  and  off. 

Select  this  checkbox  to  have  the  syntax  checker 
ignore  unknown  attributes. 

Use  this  checkbox  to  toggle  the  automatic  inden- 
tation of  lower-level  elements  on  and  off. 

Use  this  checkbox  to  toggle  the  boldface  screen 
font  for  HTML  tags  on  and  off. 

Use  this  checkbox  to  toggle  the  display  of  line 
numbers  on  and  off 

Check  this  option  to  let  the  Source  code  wrap  at 
the  margin  of  the  Source  view  window. 

Click  the  Source  icon  to  open  the  Source  view 
preferences. 


Enter  the  indentation  (in  characters)  for  lower- 
level  tags. 


~ L 


Preview  your  settings  here. 
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The  Source  dialog  box  contains  the  following  options: 

• The  Enable  dragging  of  marked  text  checkbox  toggles  the  internal 
drag  & drop  support  on  and  off. 

• Relaxed  checking  of  special  characters  relaxes  the  rules  applied  to 
special  characters  when  checking  the  syntax.  Enabling  this 
option  allows  you  to  use  uppercase-only  characters  as  found  in 
older  HTML  files  and  instructs  the  syntax  checker  to  stop  looking 
for  a trailing  semicolon.  Example:  The  &lttag&GT string  will  be 
interpreted  as  &lt;tag&gt;. 

• The  Do  not  mark  unknown  attributes  as  errors  checkbox  instructs 
Adobe  GoLive’s  syntax  checker  to  ignore  non-HTML  or  unknown 
tag  attributes.  For  example,  Adobe  GoLive  uses  the  custom  COOL 
attribute  to  identify  an  HTML  table  as  a layout  grid.  If  you 
uncheck  this  option,  the  syntax  checker  will  find  and  mark  this 
attribute  as  unknown. 

• The  Bold  for  Tags  checkbox  toggles  the  boldface  display  attribute 
for  HTML  tags  on  and  off. 

• The  Auto  Indent  checkbox  toggles  the  automatic  indenting  of 
lower-level  HTML  tags  on  and  off. 

• The  Tab  size  text  box  sets  the  indentation  (in  characters)  of 
lower-level  HTML  tags. 

• Selecting  the  Line  numbers  option  displays  line  numbers  at  the 
left  margin  of  the  Source  Editor  window. 

• Selecting  the  Soft  wrap  option  lets  the  HTML  wrap  in  the  Source 
view  when  it  reaches  the  right  margin  of  the  window. 

• The  preview  pane  at  the  bottom  of  the  dialog  box  lets  you  pre- 
view the  effect  of  your  settings  instantly. 
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Browser  Sets  The  Browser  Sets  dialog  box  lets  you  combine  browsers  and  revisions 

of  the  HTML  specification  to  complex  sets  of  HTML  syntax  rules.  The 
sets  you  assemble  here  appear  in  the  browser  compatibility  menu  in 
the  Source  Editor  window  (see  page  533).  Based  on  the  tag  descrip- 
tions in  Adobe  GoLive’s  Web  Database,  they  instruct  the  built-in  syn- 
tax checker  which  rules  to  use  when  checking  your  source  code. 

Building  a Browser  Set  for 
Syntax  Checking 


Click  any  option  to  specify  which  set  of  HTML 
rules  the  syntax  checker  is  supposed  to  use. 


Preferences 


□ 

EL 

a 

s. 

ii 


ColorSync** 1 2 3 4 5 6 7 8 9 

LiveObjects 

Site 

Browsers 

Find 

Spell  Checking 
Plugins 
Network 
Source 

- 

Font 

Colors 

Printing 

JavaScript 


Browser  Sets 


Netscape  & IE  3 , 4 
Netscape  2-4 
Explorer  2-4 
CyberStudio 
4.x  Browser 


Netscape  8s  IE  3,  4 


Browser 
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CyberStudio 

□ 

© 

Explorer  2.x 
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d 

Explorer  3.x 
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Explorer  4.x 
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5$ 

HTML  2.0 

□ 

&2 

HTML  3.2 

□ 

40 

HTML  4.0 

□ 

m 

Navigator  2.x 

0 

S3 

Navigator  3.x 

0 

B 

Navigator  4.x 

Delete  | | New  ) 0 Default  Browser  Set 


To  build  a custom  browser  set  for  the  syntax  checker,  proceed  as  fol- 
lows: 

1 Go  to  the  Edit  menu  and  choose  Preferences. 

2 Locate  and  click  the  Source  icon  in  the  scrolling  sidebar  to  open 
the  General  dialog  box. 

3 Click  the  triangle  control  to  expand  the  Source  options. 

4 Click  the  Browser  Sets  item. 

5 Click  New  to  add  a new  browser  set  to  the  Browser  Sets  list. 

6 Enter  a descriptive  name  in  the  text  box  below  the  Browser  Sets 
list — for  example,  CS  & 4.x. 

7 Activate  the  desired  set  of  checkboxes  in  the  Browser  list  to  the 
right. 

8 Activate  the  Default  Browser  Set  checkbox  if  you  want  the  syntax 
checker  to  default  to  the  new  browser  set. 

9 Click  OK  to  have  Adobe  GoLive  store  your  preferences. 
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Font  Preferences 

Selecting  a Custom  Font 

Use  these  options  to  select  a custom  font  and 
style  for  HTML  and  plain  text  displayed  in  the  ed- 
itor window. 

Preview  your  font  preferences  here. 


10  Return  to  the  Source  Editor  window  and  choose  the  new  browser 
set  from  the  browser  compatibility  menu  (only  if  you  haven’t 
made  the  new  browser  set  the  default  set  in  step  8 above). 

11  Launch  syntax  checking  to  see  how  the  new  browser  set  influenc- 
es the  behavior  of  the  syntax  checker. 

To  edit  an  existing  browser  set,  proceed  as  follows: 

1 Select  the  browser  set  from  the  Browser  Sets  list. 

2 Activate  more  checkboxes  in  the  Browser  list  to  the  right  to  add 
browsers  and  HTML  revisions,  or  deactivate  checkboxes  to 
elimininate  browsers  and  HTML  revisions. 

3 Click  OK  to  have  Adobe  GoLive  store  your  preferences. 

To  delete  an  existing  browser  set,  proceed  as  follows: 

1 Select  the  browser  set  from  the  Browser  Sets  list. 

2 Click  the  Delete  button. 

3 Click  OK  to  have  Adobe  GoLive  store  your  preferences. 


The  Font  dialog  box  controls  the  default  screen  font  that  displays 
HTML  code  and  content  in  the  Source  Editor  window. 


You  can  select  a custom  font,  font  size,  and  style  for  HTML  code  to 
override  the  default  Monaco  9 pt  plain  setting. 
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Syntax  Highlighting  The  settings  in  the  Colors  dialog  box  let  you  turn  syntax  highlighting 

Preferences  on  and  off  and  control  the  way  the  individual  HTML  tags  and  en- 

closed text  are  displayed  in  the  Source  Editor  window  when  the  user 
enables  syntax  highlighting. 


Customizing  Syntax  Highlighting 


Use  this  group  of  radio  buttons  to  control  syntax 
highlighting. 


Use  the  Text  and  URL  color  fields  as  well  as  the 
color  fields  in  the  Media  & Links  and  Detailed 
sections  to  select  custom  colors  for  HTML  tags 
and  content. 


The  Colors  dialog  box  contains  the  following  options: 

• The  Syntax  Highlighting  checkbox  toggles  syntax  highlighting  on 
and  off.  This  checkbox  determines  the  default  appearance  of  the 
HTM  L code  that  the  user  sees  when  opening  the  Source  Editor.  To 
override  it,  click  the  Detailed  syntax  highlighting,  Turn  syntax 
highlighting  off,  Highlight  Media  & Links  and  Highlight  URLs  but- 
tons (see  page  532),  respectively. 

• The  color  fields  below  the  checkbox  show  the  default  colors 
used  for  syntax  highlighting  and  let  you  select  a custom  color  for 
an  HTML  code  element  of  your  choice.  Clicking  a field  opens  the 
Apple  color  wheel  to  let  you  pick  a screen  color. 
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Selecting  Printing  Options 


Use  these  options  to  override  the  default  settings 
for  hardcopy  printouts. 


Use  these  options  to  select  a custom  font  and 
style  for  JavaScript  code  printed  in  hardcopy. 


The  Pnnf/ng  dialog  box  controls  the  default  formatting  options  used 
in  hardcopy  printouts  of  the  HTML  source  code. 


The  Printing  dialog  box  contains  the  following  options: 

• The  Printer  specific  settings  section  lets  you  format  the  hardcopy 
printout  by  adding  the  color  attributes  used  for  syntax  highlight- 
ing (only  useful  on  color  printer),  use  bold  typeface  for  HTML 
tags  to  make  them  stand  out,  and  add  line  numbers  to  make 
individual  lines  of  code  easier  to  refer  to.  If  you  don’t  use  these 
options  to  override  the  default  font  styles,  the  format  of  the 
printout  will  follow  the  screen  display  preferences. 

• The  Use  special  font  for  printing  section  lets  you  apply  a custom 
font  and  style  options  to  hardcopy  printing. 
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Automating 
Operations  Using 
AppleScript 


The  Adobe  GoLive  Source  Editor  can  be  controlled  using  AppleScript, 
the  powerful  scripting  language  developed  by  Apple  Computer  to 
automate  repetitive  tasks  on  the  Macintosh.  Scripting  enables  expe- 
rienced users  to  add  a complete  suite  of  specialized  HTML  formatting 
commands  to  the  basic  editing  functionality  of  the  Source  Editor  and 
to  build  pages  automatically. 


Adobe  GoLive’s  AppleScript  Dictionary 


Click  here  to  view  an  AppleScript  command. 


Adobe  GoLive  AS  Dictionary 


Undo 

Redo 

Delete  spaces 
Select 

Select  paragr... 

Deselect 

Line 

Character 

selection-obje.. 

Document 


— HTML  Extensions : Extensions  for  handling  of  m w HTML 

Style:  Inserts  style  tags  around  the  current  selection 

Style 

Address/Bli  nk/Blockquote/Bold/Citation/Code/Defi  ni  tion/ E mphasis/ Exam  pie /Italic/Keg  board /Li  sti  ng 
| / P refo  r matted  /Sa  m pi  e /St  ri  ket  h ro  ug  h/St  ro  ng  /S  u bsc  ri  pt  /S  u pe  r3c  ri  pt /Tel  et  y pe  / U nde  rl  i ne /Va  ri  a bl  e 
- The  style  or  a list  of  styles 

Heading  small  integer  — The  size  (may  be  between  I and  6) 

[With  Alignment  Left /Center /Right]  --  Sets  the  alignment 

se  Font:  Defines  the  base  font  for  the  document 
Ba3e  Font  small  integer  — The  size  of  the  base  font 

Font:  Defines  a font  for  the  current  selection 

Font  string  — The  fontname 

[Size  3mall  integer]  — The  font  size  0-7) 

[Smaller  boolean]  — Use  if  the  font  should  be  smaller 


The  following  sections  outline  how  Adobe  GoLive’s  Source  Editor 
works  with  AppleScript  to  automate  tasks. 

To  use  AppleScript,  you  need  the  AppleScript  extension  in- 
stalled in  your  Extensions  folder  as  well  as  the  Script  Editor, 
which  is  usually  installed  in  the  AppleScript  folder  within  the 
Apple  Extras  folder  on  your  hard  disk. 

You  also  need  a working  knowledge  of  AppleScript  to  use  the 
following  script  command  reference  to  your  advantage.  For  in- 
structions on  how  to  use  AppleScript,  please  refer  to  the  appro- 
priate documentation  available  from  Apple  Computer,  Inc. 


Containers  If  the  user  doesn’t  specify  any  container,  the  script  addresses  the  doc- 

ument with  the  active  window.  If  this  document  is  not  in  HTML 
mode,  the  script  automatically  switches  to  HTML  mode.  Scripts  can 
also  address  a particular  window  or  document  directly,  using  either 
its  position  on  screen  or  its  name. 
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Lines,  Characters,  and 
Selections 


The  Source  Editor  window  contains  Line  and  Character  objects.  These 
objects  represent  physical  lines  or  characters,  which  can  be  ad- 
dressed as  single  entities  or  in  groups.  You  can  use  the  standard  Ap- 
pleScript syntax  to  address  lines  and  characters: 

Line  1 

Character  1234 
the  last  Line 

Characters  10  thru  20  of  Line  11. 

The  Character  object  exists  either  at  the  document  or  line  level.  At 
the  document  level,  it  refers  to  a single  character  within  the  docu- 
ment, starting  at  position  1.  At  the  line  level,  it  refers  to  a single 
character  on  the  specified  line,  starting  at  position  1 . Both  the  line 
and  column  or  character  specifications  start  at  position  1. 

The  Selection  object  reflects  the  current  selection.  The  selection  is  in- 
valid if  nothing  is  selected.  This  sets  the  Is  Visible  property  of  the 
selection  to  false. 

You  can  create  a selection  in  many  ways — for  example,  by  manipu- 
lating the  Starting  Point  or  Ending  Point  properties  of  the  Selection 
objector  by  using  the  Se/ecf  command.  The  Se/ecf  command  requires 
a line  or  character  object  or  a from/to  specification  such  as  “from 
{line, column}  to  {line,  column}”.  All  Paste  operations  select  the 
pasted  text  by  default. 

To  delete  the  current  selection,  use  the  Delete  Selection  or  Delete 
commands;  the  Deselect  command  cancels  the  current  selection. 

All  objects  have  Property  Contents  to  allow  direct  access  to  their  con- 
tent. The  Length  property  indicates  the  number  of  characters  in  the 
object. 

Line  and  Character  objects  have  additional  common  properties.  The 
Index  property  indicates  the  number  of  an  object,  the  number  of  a 
line,  or  the  position  of  a character  within  a document. 
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Cursor  Positioning 


Core  Elements 
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The  Position  property  is  also  common  to  both  objects.  This  property 
contains  a list  made  up  of  two  elements  and  uses  a {line,  column} 
syntax.  There  are  several  ways  to  specify  the  cursor  position  within 
the  editor  window.  You  can  use  the  Go  to  command  to  place  the  cur- 
sor in  a line  or  on  a character.  Go  to  expects  a Line  or  Character  object 
as  its  function  argument: 

Go  to  Character  1 of  Line  1 5 

Go  to  Line  10 

Go  to  the  last  Character 

A more  direct  approach  to  positioning  uses  the  Line  Index  and 
Column  Index  properties.  These  properties  contain  the  current  line 
and  column,  and  they  can  be  read  out  and  set: 

Set  this  Line  to  123 

Objects 

Window 

The  Window  object  supplies  information  on  a window.  It  consists  of 
the  pertinent  document  objects. 


Bounds 

Rectangle 

R/W 

Window  size  and  position. 

Has  Closebox 

Bool 

R/O 

True  if  the  window  has  a close  box. 

Has  Titlebar 

Bool 

R/O 

True  if  the  window  has  a title  bar. 

Hide  on  Deactivate 

Bool 

R/O 

True  if  the  window  disappears  upon 
deactivation. 

Is  Floating 

Bool 

R/O 

True  if  the  window  is  a floating  window. 

Is  Resizable 

Bool 

R/O 

True  if  the  window  has  a growbox. 

Is  Zoomable 

Bool 

R/O 

True  if  the  window  has  a zoom  box. 

Index 

Long 

R/O 

Index  of  windows  in  the  window  list 
(starts  at  0). 

Title 

Text 

R/O 

The  window  name. 

Visible 

Bool 

R/O 

True  if  the  window  is  visible. 
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Close 

Object 

Open 

Object 

Save 

document 

[File 

filename] 

New  Document 

Activate  Window 

window 

Closes  the  specified  object  (window  or 
document). 

Opens  the  specified  object. 

Saves  a document. 

The  name  of  the  file  to  be  saved. 
Opens  a new  document. 

Activates  a window. 


General  Text 
Handling  Elements 


Document 


The  Document  object  contains  the  entire  document,  including 
general  properties,  such  as  the  current  selection. 


Clipboard 

Text 

R/W 

This  property  allows  for  accessing  the 
clipboard.  It  can  be  used  as  a function 
argument  for  the  Insert  Text  method. 

Contents 

Text 

R/W 

The  content  of  the  document. 

Length 

Long 

R/O 

The  length  of  the  text  in  the  document. 

Font  Name 

Text 

R/W 

The  name  of  the  font  used. 

Font  Size 

Short 

R/W 

The  size  of  the  font  used. 

Font  Face 

Enums 

R/W 

The  attributes  of  the  current  font.  The  list 
includes  the  Bold,  Italic,  Underline, 
Outline,  Shadow,  Condense,  and  Extend 
elements.  You  can  omit  the  braces  if  you 
want  to  specify  a single  attribute  only. 

Tab  Stops 

Short 

R/W 

The  tab  stop  position. 

MIME  Type 

Text 

R/O 

The  MIME  type  of  the  document.  This 
function  returns  “text/html"  by  default. 

Syntax  Highlighting 

Short 

R/W 

Selects  Syntax  Highlighting  mode: 

0-off 

7 - detailed 

Source  editor  only: 

2 - Links,  images,  and  plugins 

3 - URLs 

Auto  Indenting 

Bool 

R/W 

Toggles  Auto  Indenting  on  and  off. 

Line  Index 

Long 

R/W 

The  number  of  the  current  line. 

Column  Index 

Long 

R/W 

The  current  column. 

Current  Line 

Object 

R/O 

The  current  line  as  a line  object. 

Selection 

Object 

R/O 

The  current  selection. 

Status  Line 

Text 

R/W 

The  content  of  the  status  line. 
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Line 

The  Line  object  refers  to  a specific  line. 


Index 

Long 

R/O 

The  line  number,  starting  at  7. 

Position 

list 

R/O 

The  Position  as  a list  with  the  {line,  1} 
syntax. 

Contents 

Text 

R/W 

The  content  of  the  line. 

Length 

Long 

R/O 

The  length  of  the  text  on  the  line. 

Character 

The  Character  object  refers  to  a particular  character. 

Index 

Long 

R/O 

The  position  of  the  character,  relative  to 
the  beginning  of  the  document  at  position 
1. 

Position 

list 

R/O 

The  position  as  a list  with  the  {line, 
column}  syntax. 

Contents 

Text 

R/W 

The  content  of  the  character. 

Length 

Long 

R/O 

The  length  of  the  character  (constant  1). 

Selection  Object 

The  Selection  object  exists  all  the  time,  even  if  there  is  no  current 
selection.  The  Is  Visible  property  indicates  whether  the  selection 
exists  or  not.  You  can  modify  the  selection  by  changing  the  Starting 
Position  and  Ending  Position  properties.  Changing  the  Contents  prop- 
erty replaces  the  current  selection  with  the  specified  text. 

Address  the  Selection  object  through  the  Selection  property,  not  by  its 
name. 


Starting  Position 

list 

R/W 

The  beginning  of  the  selection. 

Ending  Position 

Long 

R/W 

The  end  of  the  selection. 

Is  Visible 

Bool 

R/O 

True  if  a selection  exists. 

Contents 

Text 

R/W 

The  content  of  the  selection. 

Length 

Long 

R/O 

The  length  of  the  text  in  the  selection. 
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Insert  Text 

"Text” 

Inserts  the  function  parameter  as  text 
at  the  current  position. 

Insert  File 

filename 

Inserts  the  specified  file  at  the  current 
cursor  position. 

Find 

“String” 

Searches  for  the  specified  string.  The 
result  is  true  if  the  string  has  been 
found.  The  found  string  will  be 
selected. 

[Applying 

Option(s)] 

Applies  the  specified  options.  One  or 
more  options  may  be  specified. 
Multiple  options  must  be  specified  as 
a list  in  braces. 

Available  Options: 

Ignore  case 

Distinguishes  between  uppercase  and 
lowercase. 

Wraparound 

Wrap  around  the  beginning  or  the 
end  of  the  document. 

From  Top 

Start  the  search  at  the  beginning  or 
the  end  of  the  text  or  the  current 
selection. 

Backwards 

Search  direction  is  backwards. 

Word 

Search  word  by  word. 

Replace 

“ String ” 

Searches  for  the  specified  string  and 
replaces  it  with  another  string.  The 
result  is  true  if  the  string  has  been 
found  and  replaced.  The  found  and 
replaced  string  will  be  selected.  If  the 
direct  parameter  is  omitted,  the 
specified  string  replaces  the  current 
selection. 

Using 

“String” 

The  string  used  for  replacing. 

[Applying 

Option(s)] 

Applies  the  specified  options.  One  or 
more  options  may  be  specified. 
Multiple  options  must  be  specified  as 
a list  in  braces. 

Available  Options: 

Ignore  case 

Distinguishes  between  uppercase  and 
lowercase. 

Wraparound 

Wrap  around  the  beginning  or  the 
end  of  the  document. 

From  Top 

Start  the  search  at  the  beginning  or 
the  end  of  the  text  or  the  current 
selection. 

Backwards 

Search  direction  is  backwards. 

Word 

Search  word  by  word. 
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Undo 

Redo 

Delete  Object 

Select  Object 

From  List 

To  List 


Select 

paragraph 


[Between  Object] 

Deselect 

Go  to  Object 

Delete  spaces 


Undoes  the  last  changes. 

Restores  data  to  the  state  before  the 
last  Undo  action. 

Deletes  the  specified  object,  which 
may  be  the  selection  object,  a line,  or 
other.  If  the  object  is  not  specified,  it 
deletes  the  current  selection. 

Makes  a selection.  The  specified 
object  may  be  a suite  of  lines  or 
characters — for  example,  " Lines  3 
thru  7”. 

The  selection  may  be  specified  using 
two  lists  with  a {line,  column}  syntax 
at  the  beginning  and  end  of  the 
selection. 

This  command  searches  a blank  line 
before  and  after  the  current  line  and 
selects  the  text  between  the  two  blank 
lines  and  the  subsequent  blank  line, 
positioning  the  cursor  on  the  blank 
line.  In  the  example  given  below,  the 
cursor  is  placed  on  the  line  “1st  Line”. 
The  asterisks  mark  the  lines  that  will 
be  selected  after  executing  this 
command. 

1st  line 

* 2nd  line 

* 3rd  line 

* 4th  line 
etc. 

As  an  option,  the  selection  can  be 
confined  to  particular  lines  by 
specifying  a range  explicitly. 
Example:  “Select  Paragraph  Between 
Lines  3 thru  5”. 

Cancels  the  current  selection. 

Sets  the  current  position  to  the 
specified  line  or  character  object. 

Deletes  all  spaces  and  tabs  from  the 
current  position  to  the  end  of  the  line 
or  to  the  next  character  that  is 
neither  a space  nor  a tab. 
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HTML  Extensions  Methods 

The  following  methods  wrap  the  current  selection  in  a start  tag  and 
end  tag  of  a specified  type.  Multiple  tag  types  can  be  specified  using 
a list.  The  following  types  are  supported: 


Style 

Tag  Type 

Address 

<ADDRESS>selection  </ADDRESS> 

Blink 

<BLINK>selection  </BLINK> 

Blockquote 

<BLOCKQUOTE>selection  </BLOCKQUOTE> 

Bold 

<B>selection  </B> 

Citation 

<CITE>selection  </CITE> 

Code 

<CODE>selection  </CODE> 

Definition 

<DFN>selection  </DFN> 

Emphasis 

<EMP>selection  </EMP> 

Italic 

<l>selection  <//> 

Keyboard 

<KBD>selection  </KBD> 

Listing 

<LISTING>selection  </LISTING> 

Preformatted 

<PRE>selection  </PRE> 

Sample 

<SAMP>selection  </SAMP> 

Strikethrough 

<S>selection  </S> 

Strong 

<STRONG>selection  </STRONG> 

Subscript 

<SUB>selection  </SUB> 

Superscript 

<SUP>selection  </SUP> 

Teletype 

<TT>selection  </TT> 

Underline 

<U>selection  </U> 

Variable 

<VAR>selection  </VAR> 
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Style  Tag 

“String” 

The  general  form  of  the  Style  method 
uses  the  specified  text  as  a tag.  You 
can  also  specify  attributes: 

Style  Tag  “A  HREF=#Marker ” 

<A  HREF=#Marker>selection  </A> 

Heading 

Size 

Formats  the  current  selection  as  a 
header.  Size  may  range  between 
1 and  6. 

[with 

Alignment] 

Left 

Right 

Center 

Alignment  options: 

Left 

Right 

Center 

Paragraph 

[Align] 

Inserts  a P tag  at  the  current  cursor 
position. 

Left 

Right 

Center 

Alignment  options: 

Left 

Right 

Center 

Base  Font 

Size 

Inserts  a BASEFONT  tag  at  the  current 
cursor  position.  Size  may  range 
between  1 and  7. 

Font 

[“Name”] 

Wraps  the  currentselection  in  a FONT 
tag.  The  name  attribute  is  the  font 
name. 

[Size 

Word] 

Font  size.  This  size  ranges  between  1 
and  7. 

[with  Smaller] 

Reduces  visible  font  size  by  using  a 
negative  relative  size.  Assumes  -7  if 
not  specified. 

[with  Larger] 

Reduces  visible  font  size  by  using  a 
positive  relative  size.  Assumes  +1  if 
not  specified. 

List 

Art 

Formats  the  current  selection  as  a 
list.  The  following  list  styles  are 
available 

Orderednumbered  list  (OL) 
Unorderedsimple  list  (UL)  Definition 
definition  list  (DL/DD) 
Termdefinition  list  (DL/DT) 

Directory 

Menu 

[Type 

type] 

The  type  of  bullet  can  be  specified  for 
simple  and  numbered  lists: 

Simple  lists: 
Discsolid  bullet 
Circlehollow  bullet 
Squaresolid  square 
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Table 


Numbered  lists: 

Arabic 
Upper  roman 
Lower  roman 
Upper  alpha 
Lower  alpha 

[“Title”]  Formats  the  current  selection  as  a 
table,  converting  an  optional  title 
into  a CAPTION  tag.  Each  selected 
row  is  converted  to  one  or  more  table 
cells. 

[Separator  "character  Each  row  consists  of  one  or  more  cells 

s']  separated  by  the  specified  character. 

Common  separators  include  the 
comma  or  tab  character.  If  the 
number  of  columns  has  not  been 
specified  explicitly,  the  script 
determines  the  maximum  number  of 
entries  in  any  one  line  of  text  within 
the  highlighted  section.  Example:  The 
following  lines  create  a table  with 
three  cells  per  row  when  specifying  “ ” 
as  a separator: 

One 


Two, three 
Four, five, six 
Seven,  eight 

[Rows 

Word] 

Row  count.  If  the  specified  row  count 
exceeds  the  maximum  number  of 
cells  that  can  be  generated  out  of  the 
text,  the  script  generates  blank  cells. 

[Columns 

Word] 

Column  count.  If  the  specified 
column  count  exceeds  the  maximum 
number  of  cells  that  can  be 
generated  out  of  the  text,  the  script 
generates  blank  cells.  Specifying  the 
number  of  columns  prohibits  the 
script  from  determining  table  width, 
provided  a separator  character  has 
been  defined. 

[Border 

Word] 

Specifies  the  border  width  of  the 
table. 

[Cell  spacing 

Word] 

Specifies  inter-cell  spacing. 

[Cell  padding 

Word] 

Specifies  the  cell  padding. 

[Width 

Text] 

Specifies  table  width.  Table  width 
must  be  entered  as  text  in  order  to 
allow  for  values  such  as  "50%.  ” 

[with 

Heading] 

Specifying  this  parameter  formats 
the  first  row  of  the  table  as  a table 
header. 
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Link 

“URL" 

Defines  the  current  selection  as  a 
hyperlink,  using  the  parameter  as  the 
destination  URL. 

Document 

layout 

[“Title"] 

Converts  the  current  document  to 
HTML,  inserting  HTML,  HEAD,  and 
Basic  Tags  and  entering  an  optional 
title  in  a TITLE  tag  within  the  HEAD 
section.  The  BODY  tag  can  be 
modified  using  a variety  of  options: 

[Background 

“URL”] 

Specifies  the  background  image. 

[Background 

color 

“Color”] 

Specifies  the  background  color  of  the 
page. 

[Text  color 

“Color”] 

Specifies  text  color. 

[Link  color 

“Color”] 

Specifies  link  color. 

[Visited  link 
color 

“Color”] 

Specifies  the  color  of  links  already 
viewed. 

[Active  link 
color 

“Color”] 

Specifies  the  color  of  the  active  link. 

[Heading 

“Text'] 

Inserts  the  specified  text  as  a header 
into  the  Body  section  using  an  HI 
tag. 

[Load  script 

“Text”] 

Uses  the  text  as  a script  for  the 
ONLOAD  attribute.  (After  the  script 
has  been  run,  the  previous  first  line  of 
the  document  is  the  current  line.) 

Check  Syntax 

Verifies  the  syntax  of  the  HTML 
document,  returning  the  number  of 
any  error  found. 

Get  Syntax  Error 

Index 

Get  syntax  error  uses  an  index 

between  7 and  the  number  of  the 
error  found.  The  faulty  code  element 
is  highlighted  and  the  error 
description  is  displayed  in  the  status 
line.  The  following  error  codes  may 
be  returned: 

0 - Invalid  error  index 

1 - Tag  expected  but  not  found 

2 - Found  end  tag  without  start  tag 

3 - No  end  tag  found  for  specified  tag 

4 - Tag  end  character  “>”  expected 
but  not  found 

5 - Found  attributes  in  an  end  tag 

6 - Specified  tag  has  no  end  tag 

7 - Required  attribute  not  found 

8 - Attribute  value  not  found 

9 - Attribute  does  not  support  values 
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70  - Value  specified  without  attribute 

1 1 - Illegal  color  code 

12  - Value  is  not  a number 

13  - Use  “ &amp instead  of 

14  - End  of  file 
Warnings 

15  - Tag  not  supported  in  selected 
browser  version 

16-  Attribute  is  not ... 

17-  Unknown  or  unsupported 
attribute  value 

18  - Unknown  or  unsupported  HTML 
special  character 

19  - Tag  is  specific  to  Adobe  G oLive 

20  - Attribute  is  ... 

21  - Attribute  value  is  not ... 
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General 


The  Preview  Screen 


Click  Preview  to  launch  Adobe  GoLive’s  unique 
previewing  mode. 


Previewing  Your  Work 

This  chapter  describes  Adobe  GoLive’s  previewing  func- 
tionality, covering  both  the  built-in  Preview  module  and 
browser-based  previewing. 


Adobe  GoLive’s  Preview  module  lets  you  preview  your  work  and  test 
your  links  without  launching  an  external  application,  giving  you  a 
very  realistic  visual  impression  of  your  page  layout. 

Atypical  Preview  screen  appears  below. 


^ File  Edit  Style  Format  Special  Project  Window  Help 


Travel  FZ 

The  newsletter  for  frequent  flyers. 


Frequent  Flyei  has  the  most  extensive  and  detailed  revievs  of  fieqnent  flyer  bonus  prograi 
covering  North  American  a3  veil  a3  international  programs  They’re  also  an  ‘Index  to 
Frequent  Flyer  Program  Ratings*  and  ‘Side  by  Side  Rating  Comparisons'  that  shovs  hov 
each  program  measures  up  - score  by  score. 


Welcome  to  Travel  EZ 

Our  topics  this  week: 

• Traveling  Unlimited 

• Traveller's  Heaven 

• Best  Deals  for  Bonus  Miles 

• Subscription  Form 

• AirBaia 


Lr* 


Program  Reviews 


see  Page  1 


mm 
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Beyond  the  built-in  Preview  module,  Adobe  GoLive  features  a short- 
cut button  in  the  toolbar  that  launches  one  or  more  user-selectable 
browsers. 
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Standard  Previewing  You  can  set  the  width  of  the  visible  area  in  the  popup  menu  in  the 

lower  right  corner  of  the  layout  window  to  ensure  that  your  page  is 
not  too  wide  for  your  audience. 


50 

100 

200 

520 


580  (14"  Monitor) 


780  (17"  Monitor) 
Window  Settings... 
• 580 


We  recommend  a width  of  580  pixels  because  it  is  unlikely  that 
users  have  a viewing  area  smaller  than  a 14-  inch  monitor. 


Using  the  Built-In 
Preview  Module 


You  can  checkyour  work atany  time  by  launchingthe  Preview  mode, 
regardless  of  the  editing  mode  you  are  using. 

Adobe  GoLive  will  either  show  you  a “still  photo”  preview  for  plain 
pages  or  an  animated  preview  if  your  page  contains  QuickTime  mov- 
ies, animated  GIFs,  or  any  other  of  the  plugin  media  items  sup- 
ported. What  you  see  closely  resembles  your  page  as  finally 
published  on  the  Web. 


To  use  the  Preview  mode,  the  Preview  Module  must  be  enabled 
in  the  preferences.  (See  Using  the  Modules  Manager  on  page  8 
in  Chapter  1,  Welcome  to  Adobe  GoLive.) 


To  preview  your  page  without  launching  a Web  browser,  proceed  as 
follows: 

1 Click  the  Preview  tab  in  the  document  window  and  wait  for 
Adobe  GoLive  to  build  the  page  display. 

2 Scroll  the  Preview  to  check  your  page  layout. 

3 Click  all  hot  spots  on  your  page  to  test  the  links. 

Notice  the  “hand”  shape  the  cursor  assumes  when  you  move  it 
over  a hot-spot  area. 

Unlike  a browser,  Adobe  GoLive  will  open  each  referenced  page 
in  a window  of  its  own. 
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Testing  Links  in  Preview  Mode 


Click  hot  spots  with  the  “hand”  cursor  to  test 
your  links. 


Welcome  to  Tra 

Our  topics  this  week: 

• Traveling  Unlimited 

• Traveller's  Heaven 

• Best  Deals  for  Bonus  Miles 

• Subscription  Form 

• Air  B||ia 


Please  note  that  you  cannot  preview  the  effects  of  JavaScript 
scripts  in  Adobe  GoLive’s  Preview  mode. 


Using  Browsers  Previewing  your  pages  using  browsers  is  another  option  that  Adobe 

for  Previewing  GoLive  offers.  You  need  to  use  browsers,  for  example,  to  find  out 

° about  potential  browser  differences;  you  also  need  browsers  if  your 

pages  contain  JavaScript  scripts,  DHTML,  Macromedia  Shockwave  an- 
imations, or  other  items  Adobe  GoLive  doesn’t  provide  native  sup- 
port for. 

Adobe  GoLive’s  toolbar  features  a Browser  Launcher  that  can  be  con- 
figured to  launch  one  or  more  browsers  with  a single  mouse-click. 


Using  the  The  following  screenshot  shows  the  Browser  Launcher  when  it  is 

Browser  Launcher  configured  to  launch  two  or  more  browsers. 


The  Browser  Launcher  in  the  Toolbar 


This  button  toggles  between  the  document  win- 
dow and  the  Site  Window. 


Click  the  generic  Launch  Browser(s)  button  to 
launch  all  selected  browsers  ... 


Netscape  Navigator1**  4 


Internet  Explorer  4.0 


...  or  select  one  from  the  Launch  Browser(s) 
popup  menu. 
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Selecting  the  Show  in  Default  Browser 
and  Show  in  Browser  Commands 


To  preview  your  page  with  your  favorite  Web  browser(s),  proceed  as 
follows: 

1 Click  the  Launch  Browser(s)  button  in  the  Toolbar  to  launch  all 
selected  browsers  successively,  or  choose  the  desired  browser 
from  the  Launch  Browser(s)  popup  menu. 

2 Wait  for  Adobe  GoLive  to  launch  the  browser,  which  will  build  the 
page  display. 

3 View  your  page  and  switch  to  the  next  browser  when  finished. 

As  an  alternative,  you  can  choose  the  following  menu  commands  to 
preview  your  page  with  your  favorite  Web  browser(s): 


New  Link 

Remove  Link 

^L 

Add  to  Keywords 

:*:K 

StartTabulator  Indexing 

"S36T 

1 

Show  in  Default  Brows  err 

Show  in  Browser 

5 ► 

Web  Database... 

*4 

Web  Database 

► 

ew  Link 
Remove  Link 
Add  to  Keywords 
StartTabulator  Indexing 

S6L 

:*K 

Show  in  Default  Browser 

%T 

Show  in  Browser 

► 

Netscape  Communicator™ 

Netscape  Navigator™  4.04 

Web  Database... 

*4 

Netscape  Navigator"^3old  3.01 

Web  Database 

► 

Internet  Explorer  4.0 

Internet  Explorer  3.0.1 

1 The  Show  in  Default  Browser  command  launches  all  selected 
browsers.  It  is  equivalent  to  the  Launch  Browser(s)  button  in  the 
Toolbar. 

2 Th  eShowin  Browser  command  and  submenu  launch  a particular 
browser  equivalent  to  the  Launch  Browser(s)  popup  menu. 


Customizing  the 
Browser  Launcher 


Adobe  GoLive  lets  you  customize  the  Browser  Launcher  by  enabling 

and  disabling  browsers  or  adding  new  browsers. 

To  add  a new  Web  browser,  proceed  as  follows: 

1 Check  to  make  sure  that  the  desired  browser  is  installed  on  your 
hard  diskand  thatall  plugins  you  need  for  previewing  are  placed 
in  its  Plugins  folder  (or  any  other  location  your  browser  uses  as  a 
repository  for  multimedia  extensions). 

2 Go  to  the  Edit  menu  and  choose  Preferences. 

3 If  necessary,  scroll  the  preferences  groups  scroll  box  at  the  left 
side  of  the  dialog  box  until  the  Browsers  icon  appears. 


Using  Browsers  for  Previewing 
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Selecting  a Browser  in  the  Browsers 
Preferences  Dialog  Box 


Click  here  to  enable  or  disable  a browser. 


Click  the  Browsers  icon  to  view  the  Browsers 
preferences.  (Scroll  the  scroll  box  at  the  left  side 
to  reveal  the  icon,  if  necessary.) 


Click  Remove  to  delete  a selected  item  from  the 
browser  list. 

Click  Find  All  to  search  your  hard  disk  for  brows- 


Click  Add  to  add  more  browsers  to  the  list. 


Preferences 


A Fonts 

Encodings 


^ ColorSync™ 
[fl  LiveObjects 
> ^ Site 


> ^ Find 
^ [QI  Spell  Checking 
§ Plugins 

^ Network 


|>  Source 
•y  ^ JavaScript 


Font 


□ Big  one  fCOMMUNICATION  Netscape  Communicator1*! 
0 Big  one  :C0MMUN  1C  AT  ION  Netscape  Navigator™  Fol< 

£]  Big  one  :C0MMUN  1C  AT  ION  Netscape  Navigator™  Fol< 

I-!  Q Big  one  :C0MMUNIC  AT  ION  :Microsoft  Internet  Applic 
[~~l  Big  one  :C0MMUN  1C  AT  ION  Microsoft  Internet-  Anwe 


Checked  browsers  are  used  by 


vShow  in  Default  Browser". 


f Add.. 


4 Click  the  Browsers  icon  to  open  the  browser  preferences. 

5 Click  Find  All  to  let  Adobe  GoLive  add  all  browsers  on  your  hard 
disk  to  the  browser  list. 

6 Click  Add  to  select  one  or  more  Web  browsers  in  the  subsequent 
dialog  box. 

7 In  the  Add  Browsers  dialog  box,  click  to  select  an  application  from 
the  list  box  in  the  upper  left  corner. 

8 Click  Add  to  add  the  selected  application  file  to  the  Select  items  to 
add...  list. 


The  Add  Browsers  Dialog  Box 


Click  to  select  a browser  from  the  list  box. 


Click  Add  to  select. 


Click  here  to  change  your  selection. 

Click  Remove  or  Remove  All  to  deselect  browsers 
Click  Done  to  confirm  your  choice. 
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9 To  modify  your  selection  before  appending  it  to  the  browser  list, 
click  Remove  to  delete  a selected  browser  from  the  Select  items  to 
add...  list,  or  click  Remove  All  to  remove  all  browsers  from  the 
list. 

10  When  you  are  finished  selecting,  click  Done  to  let  Adobe  GoLive 
add  the  selected  applications  to  the  browser  list. 

To  disable  or  enable  a Web  browser,  proceed  as  follows: 

1 Go  to  the  Edit  menu  and  choose  Preferences. 

2 If  necessary,  scroll  the  preferences  groups  scroll  box  to  the  left  of 
the  dialog  box  until  the  Browsers  icon  appears. 

3 Locate  the  desired  application  in  the  browser  list  and  check  its 
status:  A browser  is  enabled  if  the  checkmark  appears  to  the  left 
of  its  icon. 


Please  note  that  most  browsers  only  allow  one  version  to  be 
open.  You  can’t  open  Netscape  Navigator  3 and  4 at  the  same 
time,  but  you  can  open  Netscape  Navigator  and  Microsoft  In- 
ternet Explorer. 


4 Click  the  checkmark  to  disable  that  browser,  or  click  the  empty 
space  to  enable  it. 

5 Click  OK  or  press  the  Return  key  to  return  to  the  document  win- 
dow. 


Notice  the  shape  of  the  Launch  Browser(s)  button  in  the 
toolbar:  When  two  or  more  browsers  are  selected  in  the 
Browsers  preferences,  a generic  browser  icon  appears  in  the 
toolbar.  When  only  a single  application  is  selected,  the  pro- 
gram icon  of  that  browser  appears  in  the  toolbar. 


Viewing  Document  Statistics 
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Viewing 

Document  Statistics 


Adobe  GoLive  also  lets  you  view  general  document  information  and 
predict  the  approximate  time  your  page  will  need  to  download. 

To  view  the  statistics  of  the  current  document,  proceed  as  follows: 

1 Go  to  the  Special  menu  and  choose  Document  Statistics. 

2 The  subsequent  window  displays  general  document  information 
and  the  estimated  download  times,  depending  on  the  speed  of 
the  site  visitor’s  Internet  access. 


The  Document  Statistics  Window 


Document  Statistics 


Document  Sizes 

HTML  ByteCount 

34,4  KB 

Image  ByteCount 

34,0  KB 

Total  ByteCount 

68,4  KB 

Character  Count 

8,247 

Vord  Count 

1 ,437 

Download  Time 


T3  - line 
T1  - line 
ISDN  - line 
33600  bps 
28800  bps 
1 9600  bps 
1 4400  bps 
9600  bps 


00:00 :01 
00 :00 :01 
00 :00 :1 0 
00 :00 :20 
00 :00 :24 
00 :00 :36 
00 :00 :48 
00:01  :1 3 


Please  note  that  the  predictions  made  in  this  window  are  rough 
estimates  that  are  achieved  only  under  a well-defined  set  of 
circumstances.  Conditions  beyond  the  Web  publisher’s  control, 
such  as  heavy  traffic  on  the  network  and  Web  server  overload, 
may  cause  real-life  download  times  to  deviate  substantially. 
The  byte  counts  do  not  include  media  such  as  QuickTime  or 
sound  because  they  may  be  configured  to  start  playing  before 
they  are  fully  downloaded. 


Chapter  1 5 


General 


Find  in  Layout  Mode 


Find  & Replace  shows  hits  in  document 
windows,  if  desired. 


Find  & Replace  can  stack  windows  with  hits 
while  you  are  searching  multiple  files. 


Find  & Replace 

This  chapter  describes  Adobe  GoLive’s  powerful  Find  & 
Replace  too\  and  gives  instructions  on  howto  use  it  in  the 
most  efficient  manner. 


With  Adobe  GoLive’s  intelligent  Find  & Replace  tool,  you  can  find  and 
replace  text  and  HTML  code  elements  in  any  text  or  HTML  file 
throughout  your  hard  disk  or  any  volume  currently  mounted  on  your 
desktop.  A complete  set  of  search  options  on  the  Find  & Replace 
tab — such  as  global  search,  foreign  language  support,  cyclic  search- 
ing, and  regular  expressions — makes  retrieving  information  and  up- 
dating files  a snap — even  within  a complete  Web  site.  The  second 
tab,  Search  in  Site  Index,  contains  the  built-in  index  search  tool;  it  in- 
teracts with  Adobe  GoLive’s  site  management  environment  to  let  you 
simulate  the  behavior  of  your  site  with  respect  to  Web  search  en- 
gines. The  third  tab,  Find  File,  lets  you  find  files  in  a site  window. 

r ^ File  Edit  Style  Format  Special  Site  Window  Hilfe 

D1 1 ~ i riTgTai  fiimmi  s =i  G3)tiS)(EE)[iS  udizu  c®  cu  FZ 


Shown  above  is  a typical  screen — with  the  Find  dialog  box  in  the 
foreground  and  windows  with  matches  stacked  “tile-style”  in  the 
background. 

Adobe  GoLive  can  also  search  for  text  in  non-HTML  documents,  in 
which  case  the  Source  mode  displays  matches. 
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Chapter  Overview 


Tabs  in  the  Find  Dialog  Box 

Click  the  Find  & Replace  tab  to  access  the  basic 
and  advanced  search  options. 

Click  the  Search  in  Site  Index  tab  to  access  the  in- 
dex-based search  options. 

Click  the  Find  File  tab  to  access  the  file  search 
options  for  the  Site  window. 


Find  & Replace 


The  major  sections  of  this  chapter  give  detailed  instructions  on  how 
to  use  the  different  options  available  in  the  Find  dialog  box.  The  first 
five  sections  deal  with  the  basic  tools  offered  by  the  Find  & Replace 
tab  of  the  Find  dialog  box: 

• The  Local  Search  section,  starting  on  page  573,  describes  how 
you  can  use  the  Find  dialog  box  and  its  options  in  a single  docu- 
ment. It  also  explains  the  Find  Next  and  Find  Selection  menu 
commands,  as  well  as  Drag  & Drop  Searching. 


0 Ignore  Case  Q Backwards 

0 Entire  Vord  Q From  Top 

Q Regular  Expr.  □ Vrap  Around 
Replace 

1 I Find  in  Files 


Replace 


| Replace  & Find  J 
| Replace  All  j 


• The  Global  Search  section,  starting  on  page  576,  outlines  how 
the  Find  dialog  box  lets  you  find  text  and  HTML  code  in  selected 
files  or  throughout  a site. 

• Local  Find  & Replace,  starting  on  page  578,  explains  how  to  find 
and  replace  text  and  HTML  code  in  a single  document  using  the 
Find  dialog  box. 

• The  Global  Find  & Replace  section,  starting  on  page  580,  illus- 
trates how  you  can  find  and  replace  text  and  HTML  code  in 
selected  files  or  throughout  a site.  It  also  covers  the  Replace, 
Replace  & Find  Next,  and  Replace  All  menu  commands. 

• Wildcard  Search,  starting  on  page  583,  describes  how  you  can 
use  Adobe  GoLive’s  advanced  search  options  to  find  and  replace 
varying  patterns  of  text  and  HTML  code.  This  section  includes 
common  examples  and  a complete  reference  of  the  wildcard 
characters  that  Adobe  GoLive  supports. 

Two  additional  sections  deal  with  the  tools  residing  in  the  Search  in 

Site  Index  and  Find  File  in  Site  tabs  of  the  Find  dialog  box: 

• Index  Search,  starting  on  page  587,  describes  Adobe  GoLive’s 
index  search  tool,  which  simulates  a Web  search  engine. 

• The  Find  File  section,  starting  on  page  592,  discusses  Adobe 
GoLive’s  Find  File  tool,  which  finds  files  in  the  Site  Window. 


Local  Search 
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Local  Search  When  you  are  searchingfortext  locally  in  the  current  document,  Find 

acts  just  like  the  same  tool  in  a word  processor  or  basic  text  editor. 
You  can  use  Find  in  the  Layout,  Outline,  or  Source  modes. 


Finding  Text 


Click  here  to  type  in  the  text  you  want  to  search 
your  document  for. 


Use  these  options  to  define  what  type  of  text  el- 
ement to  search  for  and  how. 

Use  the  search  history  popup  menu  to  select 
text  from  previous  searches. 


To  search  the  current  document  for  text,  proceed  as  follows: 

1 Go  to  the  Edit  menu  and  choose  Find  ...,  or  press  Command-F  to 
open  the  Find  dialog  box. 


Choosing  the  Find  Command 
from  the  Edit  Menu 


Undo  Typing 


9§Z 


Cut  3§X 

Copy  §€C 

Paste  m 

Clear 

Select  Rll  #:fi 


Find  Next 
Find  Selection 

Replace 

Replace  & Find  Next 


3§G 

3§R 

^33§R 


llchr 


2 Type  in  the  text  you  want  to  search  your  document  for  in  the  Find 
text  box,  search  for  selected  text  (see  page  575),  or  use  drag  & 
drop  searching. 

Alternatively,  if  you  are  looking  for  text  that  you  have  searched  for 
previously,  you  can  choose  an  item  from  the  search  history  popup 
menu  to  the  right  of  the  Find  text  box. 


Previously  Used  Search  Strings  in  the 
Search  History  Menu 

Previously  used  search  stringsappear  at  the  top  of  — 
the  search  history  menu. 


| freqeunt 

frequent 

frequent  traveller 

* 

one  word 

optional  part 

any  word 

quotation 

integer  number 

fractional  number 

any  number 

begin  tag 

begin  tag  with  parameters  1 

end  tag 

J 
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3 Check  the  Ignore  Case  checkbox  if  you  want  to  disable  case-sensi- 
tive searching. 

Ignore  Case  lets  you  find  words  with  uppercase  and  lowercase  let- 
ters, enabling  you  to  find,  for  example,  both  Frequent  Traveller 
and  frequent  traveller. 

4 Check  the  Entire  Word  checkbox  if  you  want  to  find  complete 
words  only,  or  leave  the  Entire  Word  option  unchecked  to  include 
word  fragments — for  example,  Freq  in  Frequent  and  Frequency. 

5 Check  the  Regular  Expressions  checkbox  if  you  want  to  enable 
wildcard  search  and  have  Adobe  GoLive  add  a selection  of  wild- 
card search  options  to  the  search  popup  menu  (the  menu  to  the 
right  of  the  Find  text  box).  For  more  information  on  wildcard 
searching,  please  refer  to  the  section  Wildcard  Search,  starting  on 
page  583. 

6 Check  the  From  Top  checkbox  if  you  want  to  start  searching  at  the 
top  of  your  document. 

7 Check  the  Wrap  Around  checkbox  if  you  wantto  let  Adobe  GoLive 
restart  the  search  at  the  top  after  it  reaches  the  end  of  the  docu- 
ment. 

8 Check  the  Backwards  checkbox  if  you  want  to  search  your  docu- 
ment from  the  current  cursor  position  toward  the  top  of  your 
document.  This  will  change  the  From  top  option  to  From  bottom. 

9 Click  the  Find  button  to  start  searching  your  document. 

10  Adobe  GoLive  will  highlight  the  first  match,  if  any,  and  move  the 
Find  dialog  box  to  the  background.  (See  page  593  for  instructions 
on  how  to  keep  the  window  in  the  foreground.) 

11  To  continue  searching,  use  the  Find  Next  command  described  be- 
low. 


Find  Next 


The  Find  Next  command  is  a shortcut  that  allows  for  carrying  on  with 
the  last  search  without  reopening  the  Find  dialog  boxor  moving  itto 
the  foreground. 

To  find  the  next  match  with  the  Find  dialog  box  closed  or  moved  to 
the  background,  proceed  as  follows: 

Choose  the  Find  Next  command  from  the  Edit  menu  or  press 
Command-G. 


Local  Search 


575 


Searching  Selected  Text 


This  feature  is  a shortcut  to  simple  search,  available  in  the  Layout, 

Source,  and  Preview  modes  (not  in  Outline  mode).  It  allows  for 

searching  selected  text  without  opening  the  Find  dialog  box. 

Adobe  GoLive  will  start  looking  for  selected  text  at  the  current  cursor 

position.  The  selection  must  be  located  within  a paragraph. 

To  search  the  current  document  for  selected  text,  proceed  as  follows: 

1 Select  the  desired  text  in  your  document. 

2 Go  to  the  Edit  menu  and  choose  Find  Selection,  or  press  Com- 
mand-H,  to  search  the  selected  text  without  opening  the  Find  di- 
alog box. 

3 Adobe  GoLive  will  highlight  the  next  occurrence  of  the  selected 
text,  depending  on  the  current  settings  in  the  Find  dialog  box, 
such  as  Ignore  Case. 

4 To  continue  searching,  use  the  Find  Next  command  described  on 
page  574. 


Drag  & Drop  Searching 


Drag  & drop  searching  lets  you  select  text  in  the  document,  drag  it 
onto  the  Find  dialog  box,  and  drop  it  in  the  Find  text  box. 


Drag  & Drop  Searching 


Click  and  drag  the  desired  text  to  select  it. 

Drag  the  selected  text. . . 

. . . and  drop  it  in  the  Find  text  box. 


□ )b)  mi  m)  an  □!  eT~ 


Q Frequent  Traveller  Homepage 


<2>  □ Cl 


Travel 


— Find  & Replace 


frequent  flyer  bonus  programs, 
covering  North  American  as  well 
as  international  programs.  They're 
also  an  " Index  to  Frequent  Flyer 
Program  Ratings"  and  "Side  by 

Y»Y*335  - 


1©  r 


[v  | Ignore  Case  Q Backwards 
II  ] Entire  Vord  [J  From  Top 
□ Regular  Expr.  □ Vrap  Around 


J 


I Replace  & Find  | 


| Replac 


J 


|>  - [J  Find  in  Files  - 


To  use  the  drag  & drop  search  feature,  proceed  as  follows: 

1 In  the  document  window,  select  the  desired  text. 

2 Drag  the  selected  text  onto  the  Find  dialog  box  and  drop  it  in  the 
Find  text  box. 

3 Click  the  Find  button  or  press  the  Return  key  to  start  searching 
your  document. 

4 To  continue  searching,  use  the  Find  Next  command  described  on 
page  574. 
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Global  Search  Global  Search  permits  you  to  find  text  and  HTML  code  elements  in 

multiple  files,  determining  exactly  which  files  to  search.  You  can 
open  theSite  Window  and  search  all  files  directly,  oryou  can  limit  the 
search  to  individual  files  or  folders. 


Drag  & Drop  Selecting  a File 
for  Searching 


Click  the  desired  file  in  the  Site  window. 

Drag  a file  at  the  small  triangle  control  to  open 
the  Find  in  Files  section,  then  drag  on  to  the 
Files  list  box. 

Drag  your  selection... 


...  and  drop  it  in  the  Files  list  box. 


Newsletter  Site 


isi 


Newsletter  Folder 


30 


it  5 


CJL  More  Files 
jj~\  newpluqin.csml 
SubscriptionFor... 
[j~\  TravelingUnlimit... 
TravellersHeave... 


Newsletter  Site 


> Q 

> Cl 

>_a_ 

IM3 

nr: 


QuickDrawSD 

QuickTime 


URL 

/Macintosh  HD /Desktop  F< 
/Macintosh  HD /Desktop  F> 
/Macintosh  HD /Desktop  Ft 
/Macintosh  HD /Desktop  Ft 


/Macintosh  HD /Desktop  F. 
/Macintosh  HD /Desktop  Ft 
/Macintosh  HD /Desktop  Ft 

n ■B"*"’1 

\ /Macintosh  HD /Desktop  | 
/Macintosh  HD /Del 
/Macintosh  HD/Desktop  Ft  _ 
/Macintosh  HD /Desktop  F- 
/Macintosh  HD /Desktop  Ft 


I Frequent  Flyer 


0 Ignore  Case  Q Backwards  | Replace 

l~l  Entire  Vord  □ From  Top  rjT 

□ Regular  Expr.  Q Vrap  Around  = 

Replace 

'-0  Find  in  Files 


| Replac 


c 


□ Source  Mode 
n Don't  Open  Vindows  [ Stop 

Encoding  I CS-Western  (Latin  1)  I ?~1 

I Files 


H 


33 


9 


I Add  Files...  | 


I 


| Remove  All  | 


To  use  Global  Search  and  view  all  matches  within  documents,  pro- 
ceed as  follows: 

1 With  the  Site  Window  open,  type  in  the  text  you  are  looking  for  in 
the  Find  text  box  and  select  basic  search  options  (see  page  573), 
if  required. 

2 To  define  the  scope  of  your  search  more  closely,  click  the  small 
triangle  next  to  the  Find  in  Files  checkbox  to  expand  the  Find  in 
Files  section  of  the  dialog  box. 

3 If  you  want  to  limit  the  search  to  selected  files,  specify  those  files 
now.  There  are  two  ways  to  select  files: 

- Click  (Shift-click)  to  select  the  desired  file(s)  in  the  Site  Window 
and  drag  the  file(s)  onto  the  Files  list  box  at  the  bottom  of  the 
Find  dialog  box  (see  screenshot  above).  This  will  check  the 
Find  in  Files  checkbox. 

- You  can  also  drag  & drop  to  select  entire  folders,  selecting  all 
files  in  those  folders  in  the  process. 

4 Check  the  Source  Mode  checkbox  if  you  want  to  view  the  matches 
in  source  mode,  displayed  as  raw  HTML  code.  Select  this  check- 
box if  you  want  to  find  individual  HTML  tags;  otherwise  Adobe 
GoLive  will  only  let  you  find  visible  content. 

5 The  Don’t  Open  Windows  checkbox  should  be  unchecked  when 
finding  so  that  you  can  see  matches.  You  may  want  to  check  it 
when  doing  a find  & replace. 

6 Click  the  Find  button  to  view  the  first  match. 


Global  Search 


577 


7 Adobe  GoLive  will  show  you  the  first  file  found  containing  match- 
ing text. 

8 Click  the  Find  Next  button  to  view  the  next  match  in  the  same  or 
next  document. 

Alternatively,  you  can  click  the  Find  All  button  to  have  Adobe  GoLive 
find  the  desired  text  in  all  files  you  have  specified.  In  the  list  box,  all 
files  with  matches  will  be  marked  by  a number  appearing  in  the  hit 
counter  column.  When  you  double-click  a file  with  a hit  count, 
Adobe  GoLive  will  open  it  and  highlight  the  first  match. 


The  Current  File  Indicator  and 
Hit  Counter  in  the  Files  List  Box 


Numbers  displayed  in  the  Hits  column  indicate 
the  number  of  matches  in  the  respective  file. 

The  small  arrow  indicates  the  file  currently 
being  searched. 


t Opt  >vs 

Ei..  .ding  fcl~- ..  c*  tern  (Latin  ■ , ^ 1 


1 Files 


SubscriptionForm.html 


T ravelingUnlimited  .html 
TravellersHeaven.html 
example  1 .html 
template  1 .html 

32  Files 


Remove  All 


While  Adobe  GoLive  is  searching  selected  files  or  folders,  it  lets 
you  keep  track  of  the  search  in  the  Find  dialog  box.  A moving  ar- 
row in  the  Files  list  indicates  the  file  currently  being  searched, 
while  a number  appearing  behind  the  file  name  indicates  how 
many  occurrences  have  been  found. 

Alternatively,  you  can  do  the  following  to  select  files: 

1 Click  the  Add  Files  button  to  check  the  Find  in  Files  checkbox  au- 
tomatically. 

2 Select  the  files  you  want  to  search  in  the  subsequent  file  selection 
dialog  box  (see  below). 


The  Add  Files  Dialog  Box 


Click  to  select  a file  or  folder  from  the  list  box. 


Click  Add,  Add  Folder,  or  Add  All  to  select. 


To  change  or  undo  your  selection,  click  an  item  in 
the  list  box, ... 

...,  then  click  Remove  or  Remove  All. 

Click  Done  to  confirm  your  choice. 
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You  can  also  select  the  entire  project  and  remove  individual  files  af- 
terward: 

1 Click  the  Add  Site  button  to  select  all  searchable  files  found  in  the 
Site  Window. 

2 Click  to  select  the  files  you  don’t  want  to  have  searched  and  press 
the  Delete  or  Backspace  key  to  exclude  them  from  the  search. 

To  deselect  files,  proceed  as  follows: 

1 To  remove  a selected  file  or  folder,  click  in  the  Files  list  box  to  se- 
lect it  and  press  the  Backspace  or  Delete  key. 

2 To  remove  all  selected  files  or  folders,  click  the  Remove  All  but- 
ton. 


Local  Find  & Replace 


You  can  also  drag  & drop  to  add  files  from  the  Finder. 


Local  find  & replace  lets  you  find  and  replace  text  and  HTML  code  el- 
ements in  the  current  document. 

You  can  find  and  replace  items  successively  and  confirm  all  changes, 
or  “across  the  board,”  viewing  only  the  progress  of  the  search. 


Local  Find  & Replace 


Click  here  to  type  in  the  text  you  want  to  replace 
in  your  document. 

Use  this  popup  menu  to  select  text  from  previ- 
ous searches. 


Click  here  to  type  in  the  new  text. 


To  find  & replace  text  in  the  current  document,  proceed  as  follows: 

1 Goto  the  Edit  menu  and  choose  Find  ...,  or  press  Command-F,  to 
open  the  Find  & Replace  dialog  box. 

2 Type  in  the  text  you  want  to  replace  in  your  document  in  the  Find 
text  box,  search  for  selected  text  (see  page  575),  or  use  drag  & 
drop  searching  (see  page  575). 

Alternatively,  if  you  are  looking  for  text  that  you  have  searched  for 
previously,  you  can  choose  an  item  from  the  search  history  popup 
menu  to  the  right  of  the  text  box. 

3 Check  the  Ignore  Case  checkbox  if  you  want  to  d isable  case-sensi- 
tive searching. 
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4 Check  the  Entire  Word  checkbox  if  you  want  to  find  complete 
words  only,  or  leave  the  Entire  Word  option  unchecked  to  include 
word  fragments,  for  example,  Freq  in  Frequent  and  Frequency. 

5 Check  the  Regular  Expressions  checkbox  if  you  want  to  enable 
wildcard  search  and  have  Adobe  GoLive  add  a selection  of  wild- 
card search  options  to  the  search  popup  menu  (the  menu  to  the 
right  of  the  Find  text  box). 

Please  note  that  Find  & Replace  is  a very  powerful  tool,  espe- 
cially when  used  in  conjunction  with  wildcard  search.  Whenev- 
er you  use  wildcards  in  the  Find  & Replace  dialog,  be  sure  you 
know  what  you  are  doing.  We  strongly  recommend  that  you 
leave  the  Regular  Expr.  option  unchecked  and  refrain  from  en- 
tering wildcard  characters,  especially  when  you  plan  on  click- 
ing the  Replace  All  button  in  a global  find  & replace  scenario. 
Read  the  section  Wildcard  Search  ( starting  on  page  583)  carefully 
to  get  a better  understanding  of  the  wildcard  search  options. 

6 Check  the  Backwards  checkbox  if  you  want  to  search  your  docu- 
ment from  the  current  cursor  position  toward  the  top  of  your 
document.  The  search  will  stop  at  the  last  occurrence  of  the  item 
you  are  looking  for. 

7 Check  the  From  Top  checkbox  if  you  want  to  start  searching  at  the 
top  of  your  document. 

8 Check  the  Wrap  Around  checkbox  if  you  want  Adobe  GoLive  to  re- 
start the  search  at  the  top  of  the  document. 

9 Click  the  small  triangle  next  to  the  word  Replace  to  expand  the 
Replace  section  of  the  dialog  box,  if  necessary. 

10  In  the  Replace  text  box,  type  in  the  text  you  want  to  replace  the 
searched  item  with,  or  use  drag  & drop  to  select  text  (see 
page  575). 

Alternatively,  if  you  have  replaced  text  previously,  you  can  choose  an 
item  from  the  search  history  popup  menu  to  the  right  of  the  Replace 
text  box. 

11  Click  the  Find  button  to  start  searching  your  document. 

While  searching,  Adobe  GoLive  will  successively  highlight  all  occur- 
rences in  the  current  document.  Click  the  Replace  button  in  the  Find 
& Replace  dialog  box  to  replace,  or  click  Find  or  Find  Next  to  continue 
searching  without  changing  a matching  item. 

Alternatively,  click  Replace  All  to  replace  all  matches  with  the  text 
typed  into  the  Replace  text  box. 
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Global 

Find  & Replace 


Global  Find  & Replace 


Click  here  to  type  in  the  text  you  want  to  search 
for  in  your  documents. 

Use  these  options  to  define  what  type  of  text 
element  to  search  for  and  how. 


Click  here  to  type  in  the  new  text. 


Use  these  options  to  select  the  search  mode. 

If  you  are  searching  foreign-language  files,  select 
a script  system  from  this  popup  menu. 


{ 

{ 


Global  find  & replace  is  the  equivalent  to  global  search,  adding  the 
extra  capability  to  replace  text  and  HTML  code  elements  in  files 
throughout  your  site  or  selected  files,  even  when  they  are  not  in 
HTML  format. 


To  use  Global  Find  & Replace  and  view  all  matches  within  documents 
before  replacing,  proceed  as  follows: 

1 With  the5/'fe  Window  open,  type  in  the  text  you  are  looking  for  in 
the  Find  text  box  and  select  the  basic  search  options  described  on 
page  578,  if  required. 

We  strongly  recommend  that  you  leave  the  Regular  Expr.  op- 
tion unchecked  and  refrain  from  entering  wildcard  characters, 
especially  when  you  plan  on  clicking  the  Replace  All  button  in 
a global  find  & replace  scenario. 

2 To  define  the  scope  of  your  search  more  closely,  click  the  small 
triangle  next  to  the  Find  in  Files  checkbox  to  expand  the  Find  in 
Files  section  of  the  dialog  box. 

3 If  you  want  to  limit  the  search  to  selected  files,  specify  those  files 
now.  There  are  several  ways  of  selecting  files: 

- Click  or  Shift-click  to  select  the  desired  file  or  files  in  the  Site 
Window  and  drag  them  onto  the  Files  list  box  at  the  bottom 
of  the  Find  & Replace  dialog  box  (see  screenshot  on  page  576). 
This  will  check  the  Find  in  Files  checkbox. 

- You  can  also  drag  & drop  to  select  entire  folders,  selecting  all 
files  in  those  folders  in  the  process. 
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- Click  the  Add  Files. . . button  and  select  the  files  you  want 
searched  in  the  subsequent  file  selection  dialog  box. 

- Click  the  Add  Site  button  to  add  all  files  within  your  site  and 
customize  your  selection  by  deleting  individual  items. 

4 Check  the  Source  Mode  checkbox  if  you  want  to  view  the  matches 
in  source  mode,  displayed  as  raw  HTML  code. 

Find  & Replace  is  a very  powerful  tool,  especially  in  source 
mode.  Checking  the  Source  Mode  checkbox  instructs  Adobe 
GoLive  to  replace  any  occurrence  of  the  text  in  the  Find  text 
box,  regardless  of  whether  it  is  visible  document  content  or 
HTML  code,  such  as  text  in  a directory  path  specification.  Con- 
sequently, if  you  replace  the  word  “Traveler”  in  all  project  files 
with  the  Source  Mode  option  checked,  Adobe  GoLive  will  also 
replace  that  word  in  hyperlinks  pointing  at  a file  named,  for  ex- 
ample, “FrequentTraveler.html,”  disrupting  the  links  in  the 
process. 

5 Click  the  small  triangle  next  to  the  word  Replace  to  expand  the 
Replace  section  of  the  dialog  box,  if  necessary. 

6 In  the  Replace  text  box,  type  in  the  text  you  want  to  replace  the 
searched  item  with. 

7 Click  the  Find  button  or  press  the  Return  key  to  start  searching 
your  project  or  selected  files. 

8 Adobe  GoLive  will  highlight  the  first  match,  if  any,  and  move  the 
Find  dialog  box  to  the  background.  (See  page  593  for  instructions 
on  how  to  keep  the  window  in  the  foreground.) 

9 To  continue  searching,  proceed  as  follows: 

- Choose  the  Find  Next  command  to  leave  the  text  unchanged. 

- Select  the  Replace  command  (see  below)  to  change  the  text. 

- Choose  the  Replace  & Find  Next  (see  below)  command  to 
change  the  text  and  move  on  to  the  next  match. 


The  Replace  menu  command  is  a shortcut  that  allows  for  continuing 
a find  & replace  operation  without  reopening  or  moving  the  Find  & 
Replace  dialog  box  to  the  foreground. 

The  Replace  command  is  only  available  if  the  item  searched  for  was 
found  and  is  still  selected. 
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To  replace  the  current  selection  with  the  Find  & Replace  dialog  box 
in  the  background  or  closed,  proceed  as  follows: 

Choose  the  Replace  command  from  the  Edit  menu  or  press  Com- 
mand-R. 


The  Replace  & Find  Next 
Menu  Command 


The  Replace  & Find  Next  menu  command  is  a shortcut  that  allows  for 
replacing  the  last  selection  made  by  a find  & replace  operation  and 
finding  the  next  occurrence  of  the  item  searched  for  without  reopen- 
ing or  moving  the  Find  & Replace  dialog  box  to  the  foreground. 

The  Replace  & Find  Next  command  is  only  available  if  the  item 
searched  for  has  been  found  and  is  still  selected. 

To  replace  the  current  selection  and  search  for  the  next  match  with 
the  Find  & Replace  dialog  box  closed  or  in  the  background,  proceed 
as  follows: 

Choose  the  Replace  & Find  Next  command  from  the  Edit  menu  or 
press  Command-Option-R. 


The  Replace  All 
Menu  Command 


To  find  and  replace  in  all  project  files  or  selected  files  at  one  time, 

proceed  as  follows: 

1 Enter  text  in  the  Find  and  Replace  text  boxes  and  select  the  search 
options  as  appropriate. 

2 Check  the  Don’t  Open  Windows  checkbox  when  you  expect  to  find 
matches  in  more  than  a few  files;  otherwise,  you  may  end  up 
with  multiple  stacked  windows. 

3 Click  Replace  All  to  replace  all  occurrences  of  the  text  in  the  Find 
text  box  with  the  text  in  the  Replace  text  box. 


The  Replace  All  in  Files  Alert  Box 


Do  you  really  want  to  replace  “freqeunt”  by 
“frequent”  in  32  flle(s)? 

| Cancel  | f|  OK  |j 


4 Before  continuing,  you  will  be  prompted  to  confirm  that  you  re- 
ally want  to  replace  the  text  in  the  Find  text  box.  Click  Cancel  if 
you  are  not  sure,  or  click  OK  to  start  replacing  (see  above). 

5 When  searching  selected  files  or  folders,  the  program  lets  you 
follow  the  search  in  the  Find  & Replace  dialog  box.  A moving  ar- 
row in  the  Files  list  indicates  the  file  currently  being  searched, 
while  a number  appearing  behind  the  file  name  indicates  how 
many  occurrences  have  been  replaced. 
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The  Current  File  Indicator  and 
Hit  Counter  in  the  Files  List  Box 


Numbers  displayed  in  the  Hits  column  indicate 
the  number  of  matches  in  the  respective  file. 

The  small  arrow  indicates  the  file  currently 
being  searched. 
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You’ll  receive  a warning  message  if  Adobe  GoLive  is  unable  to 
save  while  searching  and  replacing  in  a file.  You  can  choose  to 
cancel  the  operation  or  allow  Adobe  GoLive  to 
continue. 


When  the  find  & replace  operation  finishes,  the  results  will  appear  in 
a message. 


The  Result  of  a Find  & Replace  Operation 
Appears  in  a Message  Box 
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The  Find  Dialog  with  Wildcard  Options 


Words  separated  by  the  “ | ” bar  symbol  are 
found  alternatively. 

The  search  history  menu  contains  editable 
search  strings  with  wildcard  characters. 

Check  this  option  to  enable  wildcard  searching. 


Adobe  GoLive’s  wildcard  search  capability  relies  on  Regular  Expres- 
sions, a proven  technology  used  in  many  word  processors.  Wildcard 
search  goes  well  beyond  the  limits  of  fixed  pattern  searching  to  let 
users  find  and  replace  varying  text  strings  at  one  time. 


The  wildcard  search  also  features  back-references.  When  searching 
for  a wildcard  search  pattern,  back-references  let  you  replace  text  us- 
inga  generic  replace  string  ratherthan  typingtext  in  the  Replace  text 
box. 
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Adobe  GoLive’s  Find  & Replace  dialog  provides  an  easy-to-use  inter- 
face for  wildcard  searching,  so  you  don’t  have  to  type  complex  wild- 
card-loaded  search  patterns  over  and  over.  It  adds  editable  wildcard 
patterns  to  the  search  history  menu  that  let  you  build  complex 
searches  with  minimum  effort.  You  can  customize  the  content  of  this 
menu  in  the  Preferences  window. 

Web  authors  may,  for  example,  use  wildcard  search  to  find  all  pairs 
of  start  and  end  tags  containing  a certain  string  of  text-for  example, 
all  occurrences  of  the  Web  site  owner’s  name  enclosed  in  headers. 


Examples  The  following  list  presents  a few  examples  to  demonstrate  the  per- 

formance of  the  wildcard  search  mechanisms  implemented  in 
Adobe  GoLive: 


Search  String 

Finds 

Adobe  | GoLive 

"Adobe"  or  "GoLive" 

m(i|a)ll 

"mill"  or  "mall" 

Adobe  (GoLive)? 

"Adobe  GoLive",  if  the  latter  exists,  else  "Adobe" 

</?HTML> 

"<HTML>"  and  "</HTML>" 

Ye+s 

the  word  "Yes",  containing  any  number  of  successive  "e"  charac- 
ters, such  as  "Yes",  "Yees",  "Yeees",  etc. 

Michael  J[a-z]* 

any  string  beginning  with  "Michael  J",  followed  by  any  number 
of  lowercase  letters,  such  as  "Michael  Jackson",  "Michael  Jam- 
rosy",  and  "Michael  Jordan" 

<H[1-6]> 

HTML  headers  HI  through  H6,  including  "HI",  "H2",  "H3",  etc. 

<[a-zA-Z][a-zA-Z0-9]*> 

any  start  tag  that  has  no  attributes,  such  as  "<P>",  "<b>", 
"<H2>",  "<lmaGe>" 

< [a-zA-Z]  [a-zA-Z0-9]*[ A >]*> 

any  start  tag,  including  those  with  attributes,  such  as  "cimage 
width=20>" 

Using  Wildcard 
Search 


To  use  the  wildcard  search  feature,  proceed  as  follows: 

1 In  the  Find  dialog  box,  click  the  Regular  Expr.  checkbox. 

2 Enter  a search  string  consisting  of  normal  text  and  wild  card  char- 
acters in  the  Find  text  box. 

Alternatively,  the  search  history  menu  offers  a selection  of  default 
wildcard  search  strings  to  choose  from.  You  can  customize  the  de- 
fault inventory  of  search  strings  that  comes  with  Adobe  GoLive  in  the 
Search  Preferences  dialog  box  (see  page  595)  to  meet  your  needs. 
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Wildcard  Options  in  the 
Search  History  Menu 


Editable  wildcard  search  options  appear  at  the 
bottom  of  the  search  history  menu. 


Wildcard  Character 
Reference 


freqeunt 

frequent 

frequent  traveller 

optional  part 

any  word 

quotation 

integer  number 

- fractional  number 

any  number 

begin  tag 

begin  tag  with  parameters 

end  tag 

3 Click  Find  to  have  Adobe  GoLive  show  the  first  match. 

The  following  table  lists  the  wildcard  search  options  that  Adobe 
GoLive  offers: 


Wildcard  Option 

Finds 

Examples 

Wildcards  for  Single  Characters 

any  single  character 

Q 

any  one  of  the  characters  in  square  brack- 
ets 

“[0123456789]”  finds  any  digit. 
“[a-zA-Z]“finds  any  alphabetical 
character. 

any  one  character  in  a range  enclosed  in 
square  brackets 

“[0-9]”  finds  any  digit. 

any  character  other  than  the  characters 
following  the  caret  symbol  (A)  in  the 
brackets 

“[Aab]”  finds  any  character,  except 
for  “a”  and  “b” 

\d  (or  [0-9]) 

any  digit 

\D  (or  [~0-9]) 

any  character  other  than  a digit 

\w  (or  [a-zA-Z]) 

any  character 

[a-zA-Z]+ 

any  word 

\W  (or  [Aa-zA-Z]) 

any  character  other  than  alphabetical 
characters 

\s  (or  [SPACE+\t]) 

any  white  space  (SPACE  = space  key) 

\S 

any  character  other  than  a white  space 

\r 

any  line  break  (in  HTML  source  code) 

\t 

any  tab  character,  such  as  indentations  in 
HTML  source  code 

\x00  - \xff 

any  character,  as  identified  by  its  ASCII 
value 

\X43  finds  “C” 

Quantifiers 

? 

The  question  mark  makes  the  preceding 
character  or  string  (enclosed  in  parenthe- 
ses) optional. 

“(Adobe)?  GoLive”  finds  “Adobe 
GoLive”  and  “GoLive”. 

586 


Find  & Replace 


CHAPTER  15 


Wildcard  Searching  Rules 


Using  Back-References 


Wildcard  Option 

Finds 

Examples 

+ 

The  plus  sign  finds  one  or  more  occur- 
rences of  the  preceding  character  or 
search  string  in  a row. 

“a+”  finds  “a”,  “aa”,  “aaa”,  etc. 

* 

The  star  is  equivalent  to  but  does  not 

respond  with  a “not  found”  message  if  no 
occurrences  are  found. 

[0-9]*,[0-9][0-9]+ 

Other  Search  String  Modifiers 

i 

The  vertical  bar  serves  as  a separator  for 
alternative  search  strings. 

“Adobe  | GoLive  1 4.0”  finds  “Ado- 
be”, “Golive”,  and  “4.0”. 

0 

Parentheses  enclose  a search  string  that 
serves  as  a definition  for  quantifiers. 

see  the  description  of  “?”  above 

' 

1 n source  mode,  the  caret  finds  the  start  of 
a line.  In  layout  mode,  it  finds  the  begin- 
ning of  a paragraph. 

$ 

In  source  mode,  the  dollar  sign  finds  the 
end  of  a line.  In  layout  mode,  it  finds  the 
end  of  a paragraph. 

Additional  rules  apply  when  searching  for  wildcard  characters: 

• Characters  that  are  used  to  specify  wildcard  options,  such  as 

and  must  be  preceded  by  a backslash.  For  example, 
“\?”  finds  any  question  mark. 

• The  caret  serves  as  a wildcard  character  only  when  it  precedes  a 
range  of  characters,  such  as  in  “[AA-Z]”. 

• The  dash  is  not  treated  as  a wildcard  character  if  it  precedes  a 
range  of  characters,  such  as  in  “[-ABC]”  or  “[A-ABC]”.  At  any  other 
location,  it  acts  as  a wildcard  character  indicating  a “from. ..to” 
relationship. 


If  you  frequently  use  wildcard  search  patterns  to  find  text,  you  may 
also  want  to  be  more  flexible  when  replacing  text.  Back-references 
allow  you  to  replace  without  specifying  clear  text.  They  appear  as 
wildcard  strings  in  the  Replace  text  box  of  the  Find  dialog  box,  from 
which  they  “refer  back”  to  any  string  that  matches  a part  of  the 
search  pattern. 

A back-reference  consists  of  a backslash  character  followed  by  a 
number,  for  example  “\1  ”,  “\2”,  and  so  on.  The  number  refers  to  a 
subexpression  (enclosed  in  parentheses)  of  the  wildcard  search  pat- 
tern in  the  Find  text  box: 

• “\1”  refers  to  the  first  subexpression  in  the  wildcard  search  pat- 

tern. This  subexpression  starts  at  the  first  opening  bracket  from 
the  left  and  ends  with  the  complementary  closing  bracket. 
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• “\2”  refers  to  the  second  subexpression,  which  starts  at  the  sec- 
ond opening  bracket  from  the  left  and  ends  with  the  comple- 
mentary closing  bracket. 

When  you  click  the  Replace  button,  each  back-reference  is  replaced 
with  the  part  of  the  matching  text  that  has  been  recognized  by  the 
subexpression  it  refers  to. 

The  following  example  illustrates  the  use  of  back-references: 
Wildcard  search  pattern  entered  in  the  Find  text  box: 
f(Adobe)?Golive) 

This  search  pattern  finds  any  occurrence  of  “Adobe  GoLive”  or 
“Golive”.  (The  “?”  character  makes  the  “Adobe”  enclosed  in  the  sec- 
ond pair  of  parentheses  optional.) 

Wildcard  replace  pattern  entered  in  the  Replace  text  box: 

\7  4.0 

If  the  match  is  “Adobe  GoLive”,  the  result  is: 

Adobe  GoLive  4.0 

If  the  match  is  “Golive”,  the  result  is: 

Golive  4.0 


Adobe  GoLive  features  a self-contained  search  engine  based  on  Ap- 
ple Information  Access  Technology  (AIAT)  and  developed  by  Apple 
Computer,  Inc. 


After  you  publish  your  site  on  the  Web,  Web  search  engines  system- 
atically canvass  it  for  information;  these  search  engines  use  chunks 
of  information  found  in  your  pages  to  build  their  own  search  indices. 
A search  index  is  essentially  a database  of  single-word  entries  related 
to  Universal  Resource  Locators.  When  you  access  a search  engine 
with  your  browser,  a form  will  prompt  you  to  enter  a keyword  and 
click  a button  to  start  the  search.  The  search  engine  will  then  browse 
its  index  (or  indices  if  it  manages  several  at  a time,  such  as  comput- 
ers, politics,  and  sports)  and  list  a selection  of  more  or  less  close  hits 
on  your  screen.  Hits  are  listed  by  order  of  relevance,  that  is,  how 
closely  the  information  found  in  a site’s  index  entries  matches  the 
keyword  you  entered.  For  example,  if  you  enter  Adobe  and  Golive,  a 
search  engine  will  list  all  sites  that  mention  Adobe  GoLive  as  such, 
plus  all  that  mention  the  company  name  Adobe  or  the  product  name 
Golive. 
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General  The  index  search  feature  resides  in  theSearch  in  Site  Index  tab  of  the 

Find  dialog  box.  The  screenshot  below  illustrates  the  features  in  this 
view  of  the  Find  window. 


The  Search  in  Site  Index  Tab 

Click  this  tab  to  access  the  index  search  options. 

Type  in  one  or  more  keywords  to  search  for. 

Select  a different  encoding  for  foreign-language 

Select  a site  to  be  searched. 

Select  this  option  to  view  all  hits  marked  up  in  an 
untitled  document  window  when  double-clicking 
a hit  in  the  list  box. 

Click  this  button  to  build  an  index  the  first  time 
you  use  index  search  on  a site. 

Click  this  button  to  rebuild  the  index  after  making 
changes  to  pages  in  your  site. 


Search  results  appear  in  the  list  box. 


Select  an  option  to  display  hits  by  relevance. 


□ 


Find 


HE 


Find  & Replace  f Search  in  Site  Index  ^ Find  File  ^ 


Encoding  [ CS- Western  (Latin  1 ) S] 

Site  f Newsletter  Site  I 

| Double  click  opens  an  untitled  copy  of  the 
document  with  all  hits  hilighted  in  red. 


4 Build  Index  | 
Update  Index  ~t~ 
0 Auto  Update 
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|4\  page6.html 
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|4\  BonusProgram... 

8095  t|  <| mi | 
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...,  the  Frequent  Travelers  department  offers  the  expe...t 
...Jody  Rothchild's  version  of  the  Letterman  Top  Ten  l...te 
....  Frequent  Flyer  has  the  most  extensive  and  detaile...uei 
...travel  in  the  past  year.  And,  once  again,  there  has  been 


The  index  search  feature  lets  you  simulate  a scenario  in  which  a po- 
tential visitor  enters  keywords  in  a search  engine’s  query  to  find  sites 
that  deal  with  the  same  topics  as  yours.  But  you  will  search  your  own 
site  on  your  local  machine  instead  of  the  World  Wide  Web.  By  com- 
bining typical  keywords  in  different  ways,  you  will  be  able  to  esti- 
mate whether  visitors  will  reliably  find  your  site  when  you  publish  it 
on  the  Web  using  a search  engine. 

Index  search  indexes  your  site  and  creates  an  index  file  named,  for 
example,  Newsletter  Site. index  in  the  same  folder  as  your  site  docu- 
ment (see  example  below). 


The  Site  Index  File  Icon 


Newsletter  Site.i  ndex 


Like  a real-life  search  engine,  the  index  search  tool  is  always  seeking 
to  keep  its  index  as  small  and  easily  searchable  as  possible.  There- 
fore, it  includes  only  meaningful  concepts  (for  example,  nouns,  such 
as  “traveler”  and  “newsletter”)  and  skips  “filler”  words  (articles,  such 
as  "the"  and  "a")  when  building  the  index  file. 


Index  Search 
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You  cannot  use  the  Index  Search  simulation  that  AIAT  provides 
to  implement  a search  engine  for  your  site.  Site  search  func- 
tionality most  commonly  is  added  through  a CGI  script  running 
on  your  Web  server.  Contact  your  Web  master  or  ISP  for  infor- 
mation on  what  site  search  capabilites  are  available. 


Using  Index  Search 


To  use  index  search,  proceed  as  follows: 

1 With  a site  file  opened,  choose  Find  from  the  Edit  menu  to  open 
the  Find  dialog  box. 

2 Click  the  Find  in  Site  Index  tab  to  access  the  index  search  options. 

3 If  you  have  opened  several  site  files,  go  to  the  Sites  popup  menu 
in  the  Toolbar  (see  page  661)  and  select  a site  you  want  to  search. 

4 In  the  Find  text  box,  type  in  one  or  more  keywords  to  search  for — 
for  example  “frequent”  and  “traveler” — separated  by  a space. 


Other  than  Adobe  GoLive’s  basic  find  tool,  index  search  finds 
whole  words  only.  This  means  that  you  have  to  enter  search 
strings  accurately  in  order  for  the  tool  to  find  them.  Also,  index 
search  is  not  case-sensitive,  so  entering  “Traveler”  or  “traveler” 
will  yield  the  same  result. 


5 If  you  want  to  search  foreign-language  pages,  goto  the  Encodings 
popup  menu  and  select  a different  encoding.  This  option  chang- 
es the  encoding  used  for  the  Search  text  box  to  let  you  enter  for- 
eign-language text  (if  you  have  the  proper  system  fonts  and 
keyboard  drivers  installed,  such  as  Apple’s  Japanese  Language 
Kit). 

6 Go  to  the  rank  popup  menu  at  the  lower  left  corner  of  the  win- 
dow and  select  a relevance  ranking.  This  ranking  controls  the 
way  Adobe  GoLive  displays  hits  in  the  list  box  at  the  bottom  of  the 
window.  The  ranks  are  determined  by  weighting: 

- >80%  (greater  than  80  percent)  includes  hits  with  an  80  per- 
cent or  better  ranking. 

>60%  ("greater  than  60  percent)  includes  hits  with  a 60  per- 
cent or  better  ranking. 

- >40%  ("greater  than  40  percent)  includes  hits  with  a 40  per- 
cent or  better  ranking. 

- >20%>  ("greater  than  20  percent)  includes  hits  with  a 20  per- 
cent or  better  ranking. 

- Ail  includes  all  hits  in  the  list  box,  regardless  of  their  ranking. 
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Tip:  You  can  choose  any  option  from  the  rank  menu  atany  time 
to  rebuild  an  existing  hit  list.  For  example,  if  you  end  up  with  a 
long  list  of  hits  after  selecting  the  All  option,  simply  choose 
>60%  to  shorten  the  list. 


7 The  Double-clicking  opens  an  untitled  copy  of  the  document  with 
all  hits  highlighted  in  red  checkbox  is  explained  further  below. 

8 If  this  is  the  first  time  you  use  index  search  on  the  current  site, 
you  can  click  the  Build  Index  button  to  have  Adobe  GoLive  build 
a searchable  index  before  starting.  You  can  skip  this  step  because 
you  will  be  prompted  to  build  an  indexanyway  before  the  search 
is  started. 

9 If  you  have  made  any  changes  to  pages  in  the  current  site  since 
you  have  built  the  index  or  updated  it  last,  click  the  Update  Index 
button.  This  rebuilds  the  site  index  and  ensures  that  Adobe 
GoLive  finds  all  information,  new  and  old. 

Alternatively,  you  can  check  the  Auto  Update  option  to  have  the  in- 
dex saved  automatically  whenever  you  save  changes  to  a page 

throughout  your  site. 

10  Click  the  Search  button  to  start  searching. 

11  Adobe  GoLive  displays  the  hits  in  the  list  box  at  the  bottom  of  the 
Find  window,  listing  search  results  by  order  of  relevance. 


Search  Results  in  the  List  Box 


l s or  ids  i the  jpo. 

doc..  . with  a s hilight*.  red. 


The  small  triangle  control  expands  or  collapses 
files  with  hits. 

Files  with  hits  are  displayed  as  expandable  icons, 
along  with  the  file  name  and  a relevance  ranking. 

Hits  and  their  context  can  be  viewed  after  ex- 
panding the  file  icons. 


Double-clicking  any  hit  in  the  list  box  opens  the 

document  window  with  the  hit  highlighted. 
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The  hit  list  consists  of  four  columns: 

- The  first  column  lists  the  files  containing  hits.  Clicking  the 
small  triangle  control  to  the  left  of  the  file  name  expands  the 
entry  to  let  you  view  the  hits  in  more  detail.  Clicking  a hit  re- 
names the  column  to  Term. 
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- The  percentage  in  the  Rank  column  is  the  relevance  ranking. 
The  closer  the  ranking  is  to  100%,  the  more  often  Adobe 
GoLive  has  found  an  occurrence  of  the  searched  text  within  a 
particular  document. 

- The  Context  column  shows  surrounding  text  for  each  hit.  It  is 
only  displayed  when  the  files  with  hits  are  expanded. 

12  Double-click  any  entry  below  an  expanded  file  symbol  to  view  in- 
dividual hits  directly  in  their  documents. 

Alternatively,  by  selecting  the  Double-clicking  opens  an  untitled  copy 
of  the  document  with  all  hits  highlighted  in  red  checkbox,  you  can 
view  all  hits  in  a document  at  the  same  time.  When  you  double-click 
a hit  in  the  list  box,  Adobe  GoLive  creates  an  untitled  copy  of  the  doc- 
ument and  highlights  all  hits  in  red.  An  example  appears  below. 


An  Untitled  Document  Window  with  Hits 
Highlighted 


Hits  are  marked  in  red  throughout  the  document. 


□ untitled  4 : ED  R 
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Get  ready  to  laugh  as  columnist  Tony 
r Johnson  announces  his  annual  Dubious 

Achievement  Awards.  It's  time  for  the 
annual  celebration  of  the  funniest, 

J stupidest,  most  bizarre  things  that  have 
happened  in  travel  in  the  past  year.  And , 
once  again,  there  has  been  no  shortage  of 
candidates. 

Jody  Rothchild's  version  of  the  Letterman  Top  Ten  list:  the  10  greatest  bonus  programs  fo (frequent) 
travelers.  Updated  monthly. 

The  Top  5 best  waygjojaghin  on  your  hard  earned  miles  or  points  lets  you  in  onjheJregtdeals  around. 
Updated  monthly .(^requenfalyer  has  the  most  extensive  and  detailed  reviews  orfrequeni^lyer  bonus 
ppgma^coveringTf^  as  well  as  international  programs.  There ' re  a33oW*1ndex  to 

(rrequen^lyer  Program  Ratings"  and  "Side  by  Side  Rating  Comparisons"  that  shows  how  each  program 

| 500  ▼ 

13  Perform  index  searches  repeatedly  with  different  keywords  or 
keyword  combinations  that  are  typical  for  the  topic(s)  your  site 
deals  with.  The  closer  your  results  are  to  100  percent,  the  more 
likely  it  is  that  search  engines  will  index  your  site  in  the  way  you 
prefer. 

Additional  useful  tips  for  making  your  site  accessible  appear  in  the 
section  Making  Your  Site  Known  on  the  Web  on  page  707  in 
Chapter  17,  Managing  Web  Sites  with  Adobe  GoLive). 
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Find  File 


The  Find  File  Tab  of  the  Find  Dialog  Box 


Click  the  Find  File  tab  to  access  the  file  search 
options  for  the  Site  window. 

Use  these  options  to  specify  the  search  more 
closely. 

Type  in  the  name  of  the  file  you  are  looking  for 
in  this  text  box. 


The  Find  File  tool  is  a companion  window  to  the  Site  Window  that  lets 
you  find  individual  hies  or  “non-file  objects”  (colors,  E-mail  address- 
es) throughout  your  site.  This  tool  is  particularly  useful  for  huge  sites 
with  dozens  or  even  hundreds  of  pages.  Instead  of  scrolling  through 
long  hie  lists  in  the  Site  Window,  you  simply  enter  the  full  hie  name, 
a URL,  or  a just  fragment  of  either,  click  Find,  and  let  Adobe  GoLive 
do  the  work  for  you. 

The  Find  File  tool  also  appears  when  you  click  the  Find  Files  In  Site 
button  (see  section  The  Site  Toolbar,  starting  on  page  615). 


To  use  Find  File,  proceed  as  follows: 

1 With  a site  file  opened,  choose  Find  from  the  Edit  menu  to  open 

the  Find  dialog  box. 

2 Click  the  Find  File  tab  to  access  the  file  search  options. 

3 If  you  have  opened  several  site  files,  go  to  the  Find  Item  in  Site 

popup  menu  and  select  an  alternative  site  you  want  to  search. 

4 Go  to  the  Name  popup  menu  and  choose  an  option: 

- The  default  Name  option  instructs  Adobe  GoLive  to  search  the 
site  without  filtering,  allowing  you  to  include  “non-file  ob- 
jects,” such  as  URLs,  E-mail  addresses,  and  colors  managed  in 
your  site. 

- The  URL  option  instructs  Adobe  GoLive  to  search  items  by 
Universal  Resource  Locator.  This  option  will  find  any  file  ob- 
ject that  is  referenced  anywhere  on  a page  throughout  your 
site. 

5 Go  to  the  contains  popup  menu  and  choose  an  option: 

- The  default  contains  option  instructs  Adobe  GoLive  to  search 
for  file  name  or  URL  fragments. 

- The  is  option  instructs  Adobe  GoLive  to  search  for  complete 
file  name  or  URL  specifications. 

- The  begins  with  option  instructs  Adobe  GoLive  to  search  for 
file  names  or  URLs  that  begin  with  the  specified  search  string. 


Find  Preferences 
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Find  File  and  the  Site  Window 


Find  File  highlights  any  item  it  finds  in  the  dif- 
ferent tabs  of  the  Site  window. 


Find  Preferences 


The  Preferences  - Find 
Dialog  Box 


- The  endswith  option  instructs  Adobe  GoLive  to  search  forfile 
names  or  URLs  that  end  with  the  specified  search  string. 

6 In  the  Find  text  box,  type  in  the  full  name  of  the  file  or  URL  you 
are  looking  for  or  a fragment  of  the  file  name  or  resource  locator. 

7 Click  Find  to  have  Adobe  GoLive  display  the  first  item  in  the  Site 
window  (see  example  below).  If  you  are  searching  files  the 
matches  will  be  indicated  either  in  the  Files  tab  or  in  the  Site  View 
tab,  depending  on  which  tab  has  been  activated  in  the  Site  Win- 
dow when  starting  the  search  option.  Other  items  you  are  search- 
ing for  are  displayed  in  the  respective  tabs.  Colors,  for  example, 
are  displayed  in  the  Color  tab. 


8  Click  Find  Next  to  see  the  next  item  or  choose  the  Find  Next  com- 
mand from  the  Edit  menu. 


The  Find  group  of  options  in  the  Preferences  dialog  box  gives  you  con- 
trol over  the  behavior  of  the  Find  window  and  lets  you  enter  default 
options  for  wildcard  searching.  Find-related  options  reside  in  two 
different  dialog  boxes:  Find  and  Regular  Expr. 


The  Preferences  - Find  dialog  box  contains  two  options  that  control 
the  behavior  of  the  Find  window  and  determine  whether  Adobe 
GoLive  searches  text  files  in  a site  when  you  set  the  Find  dialog  box 
to  Source  Mode  (see  page  576,  step  4 and  page  581 , step  4). 
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The  Preferences  - Find  Dialog  Box 


Choose  the  Find  icon  to  set  general  preferences. 


Preferences 


H 

General 

Modules 

A 

Fonts 

Encodings 

e 

ColorSync1* *1 

> 

& 

Site 

Browsers 

-c> 

0 ara 

Spell  Checking 

Plugins 

> 

Si 

Network 

t> 

$3 

Source 

> 

* 

JavaScript 

Q Hide  'Find'  Window  if  match  is  found 
Searching  in  a Site  using  "Source  Mode" 
® Use  only  HTML  files 
O Use  HTML  and  text  files 


The  options  in  the  Preferences  - Find  dialog  box  have  the  following  ef- 
fects: 

• Selecting  FUde  “Find”  window  if  match  is  found  closes  the  Find 
window  to  let  you  view  the  match  in  the  document  window. 
Select  this  checkbox  if  you  prefer  using  the  Find  Next  or  Replace 
& Find  Next  commands. 

Deselecting  FUde  “Find”  window  if  match  is  found  keeps  the  Find 
window  in  the  foreground.  You  may  have  to  move  the  Find  win- 
dow to  see  the  match  in  the  document  window. 

• The  radio  buttons  in  the  Searching  in  a Site  using  “Source  Mode" 
section  determine  how  Adobe  GoLive  deals  with  text  hies  when 
you  search  a site  in  Source  Mode: 

- Use  only  FITML  files  limits  the  search  to  Web  pages 

- Use  FITML  and  text  files  includes  all  text  hies  found  in  a site, 
such  as  external  stylesheets  or  JavaScript  hies 
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The  Preferences  - Regular 
Expr.  Dialog  Box 

The  Preferences  - Find  - Regular  Expr. 
Dialog  Box 


Choose  the  Regular  Expr.  item  to  set  wildcard 
searching  preferences. 


3 


3 


3) 


The  Regular  Expr.  dialog  box  contains  a list  of  editable  wildcard 
search  options  that  appear  in  the  search  history  menu  of  the  Find 
window  (see  page  584). 


Preferences 


| Regular  Expression  | Replacement 
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append  attribute 
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To  add  more  wildcard  search  strings  to  the  standard  inventory,  pro- 
ceed as  follows: 

1 Click  New.  Place  the  cursor  in  the  text  box  below  the  Name  list 
box  and  type  a descriptive  name — for  example,  “any  word  + 
GoLive”. 

2 Move  the  cursor  to  the  text  box  below  the  Regular  Expression  list 
and  type  in  the  new  wildcard  search  string.  For  example,  enter 
“[a-zA-Z]+  GoLive”  to  find  any  word  followed  by  “GoLive”. 

3 As  you  type,  the  list  will  add  the  new  option. 

4 Click  OK  to  change  the  window  and  save  your  changes. 

To  edit  an  existing  option,  proceed  as  follows: 

1 Select  the  option  to  be  edited  from  within  the  list  and  edit  it  in 
the  two  text  boxes  below. 

2 As  you  type,  the  list  will  change  the  option. 

3 Click  OK  to  change  the  window  and  save  your  changes. 

To  delete  an  existing  option,  proceed  as  follows: 

1 Select  the  option  to  be  deleted  from  the  list. 

2 Click  the  Delete  button. 
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General 


Spellchecking  Your  Work  with  Adobe 
GoLive 

Select  a language  from  this  popup  menu. 


This  pane  displays  a description  of  the  spelling 
problem  found. 

Use  this  text  box  to  edit  the  misspelled  word, 
then  click  the  Replace  button. 

Click  the  Replace  button  to  accept  the  first  sugges- 
tion. 

Use  this  button  to  add  a new  word  to  your  per- 
sonal dictionary. 


This  list  box  displays  the  corrections  suggested 
by  the  program.  Double-click  any  item  to  accept 
a correction  suggestion. 

Use  these  buttons  to  accept  a single  occurrence 
or  all  occurrences  of  a questionable  word  for  the 
current  session. 


Spellchecking 
Your  Work 

This  chapter  introduces  the  spellchecker-the  productivi- 
ty tool  that  keeps  your  site  free  of  misspellings  and  other 
errors. 


In  addition  to  its  built-in  link  parsing  and  syntax  checking  functions, 
Adobe  GoLive  features  a built-in  spellchecking  tool  to  help  ensure 
that  your  text  content  is  100%  error-free  when  you  launch  your  site 
on  the  Web. 


The  spellchecker  works  much  like  the  same  tool  in  word  processors. 
It  checks  the  visible  content  of  the  page  (ignoring  the  HTML),  letting 
you  change  or  skip  presumed  misspellings.  Unlike  other  spellcheck- 
ing tools,  however,  Adobe  GoLive  can  spell  check  an  entire  site. 
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CHAPTER  16 


Using  the 

Spellchecking  Tool 


Based  on  a combined  dictionary  in  the  Modules  subfolder  of  the 
Adobe  GoLive  program  folder,  the  built-in  spellchecking  tool  current- 
ly supports  three  sets  of  English  spelling  rules  (see  Step  2 below). 

To  spell  check  your  document,  proceed  as  follows: 

1 To  launch  the  spellchecking  tool,  choose  the  Spellchecking. . . 
command  from  the  Edit  menu  with  either  of  the  following  win- 
dows in  the  front: 

- The  document  window  in  Layout  View  or  Source  view.  In  ei- 
ther view,  you  can  start  spellchecking  at  the  current  position, 
select  text  to  spell  check  only  parts  of  the  document,  or  click 
the  From  Top  checkbox  to  start  spellchecking  at  the  begin- 
ning. 

- The  Site  Window. 


Please  note:  Adobe  GoLive  will  not  display  any  document  win- 
dows in  the  background  while  you  are  spellchecking  an  entire 
site.  It  will  only  open  pages  with  questionable  words. 


English  (US) 


English  (UK,  -isfc 
English  (UK  -ize) 


a 


2 Select  a set  of  spelling  rules  from  the  Language  popup  menu. 

3 Click  the  Check  button  to  start  running  the  spellchecker. 

4 The  program  will  display  the  first  questionable  word  now,  ac- 
companied by  a description  of  the  problem  and  suggested  cor- 
rections. If  you  are  spellchecking  a site,  it  will  open  the  document 
with  the  questionable  word. 

5 If  you  are  satisfied  with  the  first  suggestion,  click  the  Replace  but- 
ton to  have  Adobe  GoLive  change  your  text  accordingly.  If  not, 
double-click  a suggestion  in  the  Suggestions  list  box  or  edit  the 
questionable  word  before  clicking  the  Replace  button. 

Alternatively,  you  have  three  options  for  accepting  questioned 

words: 

- Click  the  Skip  button  to  accept  a single  occurrence  of  the 
questioned  word.  When  finding  the  next  occurrence  of  that 
word,  the  program  will  prompt  you  again  to  correct  it. 

- ClicktheSAv'pA//  button  to  accept  the  questioned  word  for  the 
current  session.  Any  further  occurrences  of  that  word  will  be 
ignored. 

- Click  the  Learn  button  to  add  the  unknown  word  to  your  per- 
sonal dictionary.  This  word  will  be  recognized  as  correct  in  fu- 
ture. You  can  edit  your  personal  dictionary  in  the 
preferences. 


Personal  Dictionary 
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6 If  you  are  spellchecking  a site,  you  can  click  the  Next  File  button 
to  quit  spellchecking  the  current  document  and  go  on  to  the  next 
page. 

7 The  message  No  more  errors  found  indicates  that  spellchecking  is 
finished. 

8 Click  the  close  box  to  close  the  spellchecker  window. 


Personal  Dictionary 

Editing  the  Personal  Dictionary 


The  words  you  have  added  are  listed  here. 


Click  this  symbol  to  view  the  spellchecking  pref- 
erences. 


You  can  delete  a selected  entry  or  add  new 
words  into  the  dictionary  by  clicking  one  of 
these  buttons. 


If  you  have  used  the  Learn  option  to  add  new  words,  you  can  edit 
your  personal  dictionary  in  the  spellchecking  preferences. 

Preferences  B 


[ Cancel  | f|  OK  ~|| 


If  you  have  installed  additional  languages,  you  can  select  an  option 
from  the  Personal  Dictionary  for  popup  menu  and  add  custom  en- 
tries. 


Additional  Languages 


English  (US) 
English  (UK,  -ise) 
English  (UK,  -i2e) 


To  use  additional  languages,  install  them  by  using  custom  install 
from  the  Adobe  GoLive  CD. 


Please  note  that  you  cannot  use  more  than  two  languages  at 
the  same  time.  If  a third  language  is  installed,  the  second  lan- 
guage (other  than  your  chosen  main  language),  will  be  auto- 
matically disabled. 
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Managing  Web  Sites 
with  Adobe  GoLive 

Chapter  17  describes  Adobe  GoLive’s  visual  environment 
for  managing  Web  sites  of  any  size  and  provides  instruc- 
tionson  how  to  use  its  powerful  set  of  tools,  includingthe 
Site  Window,  the  built-in  site  viewer  and  designer,  the  as- 
sociated tools  for  site  management  and  maintenance, 
and  the  FTP  upload  tool. 


Adobe  GoLive  not  only  gives  you  unprecedented  control  over  the  cre- 
ative process  but  also  assists  you  in  assembling  your  work  and  keep- 
ing it  all  together. 

A variety  of  powerful  visual  site  management  tools  built  into  Adobe 
GoLive  let  Web  authors  keep  track  of  their  material  with  ultimate 
ease.  While  you  are  working  your  way  from  the  idea  to  the  Web-ready 
site,  Adobe  GoLive’s  advanced  site  management  tools  allow  you  to 
manage  your  resources  conveniently  and  efficiently.  With  Adobe 
GoLive,  you  can  graphically  see  and  design  a site’s  structure,  adjust 
its  hierarchy,  add  pages,  delete  pages,  and  open  individual  pages,  as 
well  as  verify,  change,  and  update  links. 

One  of  Adobe  GoLive’s  most  outstanding  features  is  its  capability  to 
monitor  the  integrity  of  your  hyperlinks  and  references  to  image  and 
media  files.  The  Site  Window  reports  errors,  and  a dedicated  Error  tab 
lets  the  user  troubleshoot  faulty  links  and  references  immediately. 

Site  management  with  Adobe  GoLive  follows  a “one  site,  one  folder” 
principle.  Full  integration  with  the  Macintosh  Finder  ensures  direct 
access  to  the  physical  files  on  your  volume.  What  you  see  is  an  exact 
replica  of  the  folder  structure  and  the  files  on  your  hard  disk,  and 
whenever  you  copy,  move,  or  delete  a file  in  the  Site  Window,  you  can 
be  sure  that  the  same  happens  in  the  Finder. 

When  you  are  finished  building  pages  and  testing  your  links,  Adobe 
GoLive  lets  you  assemble  your  material  and  use  FTP  to  upload  it  to 
your  Internet  Service  Provider’s  server.  Adobe  GoLive’s  FTP  tool  also 
helps  you  reduce  online  time:  Once  your  site  is  on  the  Web  server, 
you  can  either  make  changes  locally  and  upload  only  the  files  you 
have  changed,  or  edit  your  site  remotely  and  synchronize  your  local 
files  with  those  on  the  Web  server. 
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Why  Manage  Web 
Sites  in  the  Site 
Window? 


Early  Web  sites  consisted  of  a couple  of  pages  only,  but  current  sites 
have  become  extremely  complex.  Adobe  GoLive  addresses  this  devel- 
opment by  introducing  the  Site  Window — a unique  tool  that  lets  the 
user  manage  the  entire  physical  content  of  a folder  as  a site. 

Adobe  GoLive’s  Site  Window  and  its  integrated  management  tools 
save  you  precious  time  and  effort,  especially  when  you  have  to  han- 
dle large  sites  with  multiple  files.  The  following  list  outlines  a few  of 
its  benefits: 

• Like  a window  on  your  hard  disk,  the  Site  Window  eliminates  the 
need  to  switch  back  to  the  Linder  to  view  your  files  and  folders. 
However,  the  Site  Window  lets  you  do  more  than  just  view  your 
files  in  the  way  they  are  organized  in  the  Linder. 

It  also  borrows  some  basic  file  management  capabilities  from  the 
Linder.  You  can  move  files  by  dragging  them  to  other  folders,  de- 
lete files  by  dragging  them  to  the  Trash,  and  rename  files  after 
clicking  the  file  name.  Lor  more  information,  please  refer  to  the 
instructions  in  the  section  Managing  Resources,  starting  on 
page  632. 

• It  lets  you  create  hyperlinks  visually  via  Point&Shoot.  Instead  of 
browsing  complex  folder  hierarchies  in  a file  selection  dialog, 
you  simply  locate  the  target  of  a link  in  the  Site  Window  and 
drag  from  the  source  in  the  document  window  or  the  source’s 
Inspector  to  that  item. 

• The  Site  Window  features  a link  parser  mechanism  working 
behind  the  scenes.  This  mechanism  not  only  checks  the  integrity 
of  your  hyperlinks  and  alerts  you  to  potential  problems,  but  it 
also  ensures  that  all  links  and  references  are  updated  when  you 
move  a file  to  another  folder.  The  link  parser  does  not  only 
monitor  HTML  pages,  but  also  covers  HREL  tracks  in  QuickTime™ 
movies  as  well  as  URLs  in  Macromedia  Llash  and  Shockwave 
files. 

• It  detects  “orphan”  files  outside  of  the  site  folder  and  asks  you  to 
copy  them. 

• It  lets  you  store  “non-file”  objects  for  later  reuse  in  your  site, 
such  as  URLs,  E-mail  addresses,  colors,  and  fontsets. 

• The  ability  of  the  Site  Window  to  open  multiple  sites  allows  you 
to  copy  resources  from  previous  projects  with  drag  & drop  ease. 


Basic  Concepts 
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Basic  Concepts  Before  you  create  a Web  site,  you  already  may  have  an  idea  how  you 

want  to  organize  your  physical  files.  You  start  by  creating  folders  to 
hold  your  resources — for  example,  a site  folder  with  subfolders  like 
“html,”  “image,”  and  so  on.  This  is  where  Adobe  GoLive’s  site  man- 
agement capabilities  help  you  better  organize  your  files. 

Thanks  to  its  seamless  integration  with  the  Macintosh  Finder,  Adobe 
GoLive  can  manage  any  collection  of  HTML  pages  and  associated  re- 
source files  as  a site,  if  those  files  reside  in  a common  folder.  It 
records  the  structure  of  that  folder  in  a special  file,  referred  to  as  the 
site  document  and  identified  by  a custom  icon  (see  example  below). 
The  site  document  is  stored  in  the  same  folder  as  HTML  pages  and  re- 
sources; this  folder  is  called  the  root  folder  of  the  site.  Additionally,  a 
data  folder  is  created  at  the  same  level  as  the  site  folder  to  hold  site- 
specific  stationery  and  other  items.  This  folder  doesn’t  appear  in  the 
Site  Window  because  it  contains  items  that  don’t  need  to  be  up- 
loaded to  the  server.  The  following  screenshot  shows  both  the  root 
folder  and  its  companion  data  folder. 


Root  Folder  with  Homepage,  Site 
Document,  and  Folders 

This  is  the  root  folder,  as  viewed  in  the  Finder. 

HTM  L pages  and  resou  rces  appear  at  the  top  level 
of  the  root  folder  or  may  be  stored  in  subfolders. 

This  is  the  homepage  of  the  site,  as  viewed  in  the 
Finder. 

This  is  the  site  document,  as  viewed  in  the  Finder. 

The  companion  data  folder  is  at  the  same  level  as 
the  root  folder.  It  contai  ns  site-specific  stationery. 


When  you  create  a site  document  and  view  the  site  in  Adobe  GoLive’s 
Site  Window,  you’ll  find  that  it  displays  an  exact  replica  of  the  folder 
structure  in  the  Finder.  The  following  screenshot  presents  the  same 
site,  as  viewed  in  Adobe  GoLive’s  Site  Window. 


The  Same  Root  Folder  in  the  Site  Window 

This  menu  indicates  the  root  folder. 

Folder  symbols  in  the  Site  Window  represent  sub-  - 
folders  of  the  root  folder  in  the  Macintosh  Finder. 

FITML  pages  and  resources  appear  as  file  icons.  - 


This  is  the  homepage  of  the  site,  as  viewed  in  the 
Site  Window. 
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Chapter  Overview  In  addition  to  the  preceding  introductory  sections  that  address  issues 

of  general  interest,  the  present  chapter  contains  ten  major  parts: 

• Part  20  — Site  Management  Tools,  starting  on  page  609,  intro- 
duces the  Site  Window  and  its  companion  inspectors,  toolbar, 
menu  commands,  and  site-specific  items  on  the  Palette. 

• Part  21  — Creating  a Site  and  Importing  Resources,  starting  on 
page  622,  details  how  you  create  a site  document  and  add  or 
import  pages  and  resources. 

• Part  22  — Managing  Resources,  starting  on  page  632,  explains 
what  file  management  capabilities  Adobe  GoLive  borrows  from 
the  Macintosh  Finder  and  tells  you  how  to  inspect  files,  manage 
stationery  and  various  non-file  objects,  and  edit  hyperlinks 
across  the  site. 

• Part  23  — Viewing  the  Structure  of  a Site,  starting  on  page  661 , 
spells  out  how  you  can  view  the  hierarchy  of  pages  and  hyper- 
links within  your  site. 

• Part  24  — Designing  a Site,  starting  on  page  677,  describes  how 
to  design  a site  in  navigational  mode. 

• Part  25  — Site  Maintenance,  starting  on  page  684,  discusses 
Adobe  GoLive’s  troubleshooting  tools  for  hyperlinks  and  file  ref- 
erences. 

• Part  26  — Uploading  and  Downloading,  starting  on  page  690, 
contains  instructions  for  using  Adobe  GoLive’s  FTP  tool. 

• Part  27 — Post-Publishing  Tasks,  starting  on  page  706,  tells  you 
what  to  do  after  uploading  your  site  to  the  Web  server. 

• Part  28  — Site  Preferences  and  Options  for  Advanced  Users,  sta  rt- 
ing  on  page  708,  outlines  the  customization  options  that  Adobe 
GoLive’s  Site  module  offers. 

• Part  29  — Using  Adobe  GoLive  Project  Files,  sta  rti  ng  on  page  722, 
is  a migration  guide  that  explains  how  to  update  a project  file 
created  with  earlier  versions  so  it  can  be  used  in  Adobe 
GoLive  4.0. 


Site  Management  Tools 
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Part  20 — Site  Management  Tools 

Adobe  GoLive’s  site  management  capabilities  rely  on  the  following 

tools: 

• the  Site  Window  (see  the  following  section),  which  is  Adobe 
GoLive’s  viewer,  site  designer,  and  management  tool  for  Web 
pages  and  resources 

• the  Inspector  (see  page  61 5),  the  location  where  you  can  preview 
HTML  pages  and  resource  files  and  edit  their  properties 

• the  Site  Toolbar  (see  page  61 5),  which  offers  shortcuts  to  often- 
used  commands 

• the  commands  in  the  File  and  Site  menus  (see  page  617),  which 
contain  Adobe  GoLive’s  complete  command  inventory  for  site 
management 

• the  Site  tab  of  the  Palette  (see  page  620),  which  holds  generic 
site  elements  that  can  be  inserted  into  the  various  tabs  of  the 
Site  Window  for  reuse  throughout  your  site. 


The  Site  Window  The  Site  Window  is  the  key  to  site  management.  It  allows  you  to  col- 

lect and  manage  your  resources  using  iconized  lists  of  Web  pages, 
text  documents,  media  files,  images,  Universal  Resource  Locators 
(URLs),  mail  addresses,  colors,  and  fontsets. 

Beyond  its  site  management  functionality,  it  alerts  you  to  problems 
due  to  broken  links  and  lists  dangling  resources,  lets  you  access  your 
site  on  the  Web  server  via  FTP,  and  allows  you  to  manage  stationery 
for  your  Web  pages. 

Also  part  of  the  Site  Window  is  a graphical  site  viewing  and  design 
tool,  which  allows  you  to  survey  the  structure  of  an  existing  site  or 
design  a new  one  from  scratch. 

In  addition,  the  Site  Window  is  the  target  for  Point&Shoot,  which  lets 
you  link  or  reference  objects  in  your  site  with  ultimate  ease.  An  ex- 
ample of  Point  & Shoot  linking  appears  on  page  651. 
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Tabs  in  the  site  Window  The  Site  Window  features  five  tabs:  Files,  Site,  External,  Colors,  and 

Fontsets. 


The  Files  Tab 


The  Files  tab  is  the  key  window  area  to  managing  your  Web  site.  It  is 
divided  in  two  panes: 


• Its  left  pane  holds  all  “file  objects,”  such  as  Web  pages,  images, 
and  media  files,  Java  applets,  stand-alone  JavaScript  files,  and 
style  sheets  contained  in  your  site,  or  it  lists  the  physical  folders 
they  reside  in.  What  you  see  is  the  content  of  the  root  folder  as 
an  exact  replica  of  the  folder  structure  on  your  hard  disk. 


The  Files  Tab  of  the  Site  Window 

Click  the  Files  tab  to  view  your  site’s  resources. 

This  menu  lets  you  navigate  through  the  folder  hi- 
erarchy of  your  site  folder. 

This  list  shows  an  exact  replica  of  the  files  and 
folders  in  your  site. 


As  in  the  Finder,  the  small  triangle  control  lets  you 
expand  and  collapse  folders  in  the  list. 


This  list  shows  “orphan”  pages  and  media  files, 
invalid  links,  and  missing  files. 
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• The  right  pane  of  the  Site  Window  is  a multipurpose  area.  It  has 
three  vertical  tabs: 

- The  Errors  tab  logs  errors  by  listing  invalid  URLs  or  missing 
files.  (Thanks  to  Adobe  GoLive’s  link  parsing  mechanism,  links 
usually  can  be  broken  only  by  moving,  renaming,  or  deleting 
files  in  the  Finder,  so  you  will  rarely  have  to  deal  with  invalid 
URL  errors  as  long  as  you  manage  your  files  in  the  Site  Win- 
dow.) 

Orphan  files  may  also  appear  in  this  tab.  Orphans  are  pages, 
media  files,  images,  or  other  file  objects  that  are  referenced 
by  a page  in  your  site  but  don’t  reside  in  the  site  folder.  Or- 
phans result  when  you  import  pages  that  maintain  links  to 
items  outside  the  site  folder. 

- TheFTPtab  displays  your  site  on  the  Web  server  while  you  are 
connected  via  FTP.  This  tab  lets  you  edit  files  either  directly 
on  the  server  or  by  making  an  incremental  update,  that  is, 
overwriting  only  those  files  whose  pendants  you  changed  on 
your  local  hard  disk  before  connecting  to  the  server. 


The  Site  Window 
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The  Extra  tab  shows  an  inventory  of  stationery  you  can  use  to 
design  your  site.  It  also  lists  component  pages  that  you  can 
embed  into  pagesafter  insertinga  dynamic  component  from 
the  CyberObjects  tab  of  the  Palette  (see  page  241  for  more  in- 
formation). 


The  Site  Tab 


The  Site  Tab  of  the  Site  Window 

Click  the  Site  tab  to  view  the  structure  of  your  site 
or  design  a site  from  scratch. 

On  top  of  the  hierarchy  is  the  homepage. 


Arrows  represent  links  that  point  to  child  pages. 


Child  pages  may  have  their  own  links  to  siblingsor 
parent  pages. 


The  Site  tab,  also  referred  to  astheS/te  View,  is  both  a structural  view- 
ing tool  as  well  as  a fully  fledged  site  designer  that  lets  you  lay  out 
your  site’s  structure  before  adding  actual  content.  The  following  ex- 
ample shows  an  existing  site  viewed  in  the  Site  tab. 


The  Site  tab  supports  two  modes  that  can  be  toggled  by  clicking  a 
button  in  the  Site  Toolbar.  Beyond  its  viewing  functionality,  you  can 
use  this  view  to  design  a site  from  scratch.  This  process  is  very  intui- 
tive. You  design  a new  site  by  adding  new  pages  that  you’ll  fill  with 
content  later,  using  either  empty  documents  or  stationery.  Create 
New  Page  live  buttons  guide  you  through  the  design  process,  letting 
you  choose  whether  you  want  to  create  a new  parent  page,  a child 
page,  or  a sibling  on  the  same  level. 

TheS/fetab  also  has  companion  Inspector  windows  that  allow  you  to 
customize  the  window  to  your  personal  viewing  preferences. 

The  External  Tab 

The  External  tab  stores  Web-specific  “non-file  objects,”  including  Uni- 
versal Resource  Locators  (URLs)  and  E-mail  addresses,  ready  for  drag 
& drop  insertion  into  your  pages.  You  can  either  add  new  generic 
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URLs  and  E-mail  addresses  from  the  Palette  and  hand-edit  their  con- 
tent or  import  existing  bookmark  files  and  address  books  from  your 
favorite  browser. 


The  External  Tab  of  the  Site  Window 

□ : Newsletter  Site  = 0 0 

Files  ^ Site  f External  ^ Q Colors  ^ /{  Fontsets  *] 

and  URLs.  r 

This  menu  lets  you  navigate  through  the  hierar-  1 

chy  of  address  groups  and  URL  groups. 

Addresses  and  URL  groups  serve  as  containers  for 
non-file  objects. 

The  small  triangle  control  lets  you  expand  and  1 

collapse  groups  in  the  list. 

The  used  status  indicates  whetherthe  item  is  used 

on  any  page  throughout  your  site. 

-|3  1 External  r J 1 

Name  | Used  | Status  | URL 

^7  New  Addresses 

[jJ  airbaja  • airbaja@mailmax.com 

-S7  ^ New  URLs 

airbaja  • http://www.airbaja.com 

4 items  | 

The  Colors  Tab 


The  Colors  tab  is  a storage  location  for  frequently  used  colors.  You 
can  add  new  colors  via  drag  & drop  from  the  Color  Palette  and  give 
them  custom  names. 


The  Colors  tab  provides  a valuable  shortcut  for  coloring  content.  You 
can  either  use  the  Colors  tab  of  the  Site  Window  to  color  objects  via 
drag  & drop  or  turn  to  theS/fetab  of  the  Color  Palette,  which  lists  all 
the  colors  you  collect  in  the  Site  Window. 

The  Fontsets  Tab 

The  Fontsets  tab  stores  frequently  used  fontsets,  that  is,  lists  of  alter- 
native fonts  you  want  to  assign  to  selected  text  to  override  the 
browser’s  default  display  font  settings  (see  section  Font  Sets  on 
page  128  in  Chapter  4,  Building  Web  Pages  for  detail).  You  can  add 
new  fontsets  via  drag  & drop  from  any  page  that  contains  a fontset. 


The  Site  Window 
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The  Fontsets  Tab  of  the  Site  Window 

ick  the  Fontsets  tab  to  view  your  fontset  choices. 

This  menu  lets  you  navigate  through  the  hierar- 
chy of  fontset  groups. 

Your  site’s  fontsets  appear  here,  along  with  infor- 
mation on  the  fonts  contained. 


t ~ ^ Files  ^ Site  ^ Q External  ^ O Colors  Fontsets  ^ 

r 

f Font  Sets  ^”)  ^ 

Name  ▼ | Used  | Font  Set 

^ FcfcraioHek>«is«  Futura , Optima  ^Helvetica 

Tinges  to  Palatino  Palatino /Times  New  Roman  .Times 

2 items  | i | 

Site  Window  Controls  The  Site  Window  features  a complete  set  of  view  controls  that  let  you 

customize  the  window’s  appearance  to  meet  your  needs.  The  follow- 
ing section  describes  these  controls. 


Folders  and  Groups  Navigation  Menu 


The  menu  in  the  upper  left  corner  of  the  Site  Window  enables  you  to 
navigate  the  folder  and  group  hierarchies  in  the  Files,  External,  Col- 
ors, and  Fontsets  tabs.  Whenever  you  have  double-clicked  a folder  or 
group  to  view  its  content,  this  menu  allows  you  to  return  to  higher 
hierarchy  levels. 


The  Folders  and  Groups  Navigation  Menu 


Use  this  menu  to  navigate  the  hierarchies  of  fold-— 
ers  and  groups  within  your  site  folder. 


The  root  folder  or  highest  level  appears  at  the  bot-  - 
tom  of  the  menu. 


□ 


Q Files  ^ ^ Site  | Q 


External 


• AnimatedGIF 

I™ 


greenberg.gif 


itatus 


Whenever  you  have  double-clicked  a folder  or  group  to  view  its  con- 
tent, this  menu  lets  you  return  to  higher  hierarchy  levels. 

Point  & Shoot  Navigation  Button 

When  you  try  to  link  to  a file  or  other  item  in  the  Site  Window  but  the 
destination  pane  shows  the  content  of  an  another  folder,  the  Point 
& Shoot  Navigation  button  helps  you  navigate  folder  hierarchies 
without  interrupting  Point  & Shoot.  The  Point  & Shoot  Navigation 
button  is  active  whenever  you  open  a folder  in  either  pane  of  the  Site 
Window.  You  can  drag  at  the  Point  & Shoot  Navigation  button  to  go 
up  one  folder  level,  then  continue  to  the  files  list  and  locate  the  de- 
sired item. 
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The  Point  & Shoot  Navigation  Button 


The  Point  & Shoot  Navigation  button  allows  you 
to  go  up  one  folder  level  while  using  Point  & 
Shoot. 


The  following  example  illustrates  the  use  of  the  Point  & Shoot  Navi- 
gation button. 


Using  the  Point  & Shoot  Navigation 
Button 


□ 

Newsletter  Site 

hb 

Ci  Files  ) 

Site  ] d External  j O Colors  ) A Fontsets  | 

* 

W c 

tUS  I UK'fex.  | 


^ html 

Q airbaja.html 
a BonusPrograms.... 
a flightscheds.html 

a LAX  .html 
a page6.html 
El  SFO.html 
El  SubsoriptionFor... 

a TravelersHeave... 
a Travelingllnlimit... 
13  items  | 4 | llll  | 


Status  | 


* 

* 


/Mao: 
/Mac 
/Mac 
/Mac 
/>  lac 
/Mac 
/Mac 
A lac 
A lac 
/Mac 

ZHI 


o Missing  Files 


Status  | 


Link  Inspector 


El  TravelersHeaven.html 

*> 

ET  TravelingUnlimited.html  

ET  index.html  — 

bottom2.jpg 

<1 

l> 

TTFT 


Aspect  Controls 


Alternating  Aspect  Controls  appear  in  the  Files  tab  to  let  you  show  or 
hide  the  right  pane  of  the  Site  Window: 


®Th is  small  tab  appears  above  the  files  list  when 
you  choose  dual-pane  display  mode — that  is, 
the  full  view  of  the  Site  Window,  complete  with 
the  left  and  right  panes.  Clicking  this  control  re- 
turns the  Site  Window  to  single-pane  display 
mode.  Click  this  tab  if  you  don’t  need  the  func- 
tions in  the  Errors,  FTP,  or  Extra  tabs. 


mss 


This  small  icon  bar  appears  in  the  upper  right 
corner  of  the  Site  Window  when  you  choose  the 
single-pane  display  mode.  Clicking  this  icon  bar 
returns  the  Site  Window  to  two-pane  display 
mode. 
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Site-Specific 

Inspectors 


The  File  Inspector 


As  in  Adobe  GoLive’s  page  design  environment,  the  Inspector  window 
assists  you  in  your  site  management  tasks.  There  is  one  specific  In- 
spector for  any  type  of  object  you  select  in  the  Site  Window: 

• The  File  Inspector  appears  when  you  select  a file  object,  such  as 
a page,  image,  or  media  file.  It  lets  you  preview  and  set  general 
file  properties  and  preview  a file’s  content. 


• There  are  also  dedicated  Inspectors  that  display  the  properties  of 
non-file  objects,  including  URLs,  E-mail  addresses,  colors,  and 
fontsets,  as  well  as  containers  like  folders  and  groups. 

• The  Inspectors  for  the  S/fetab  of  the  Site  Window  let  you  set  the 
viewing  options  for  Adobe  GoLive’s  site  viewer  and  designer  tool. 


The  Site  Toolbar 


The  Site  Toolbar 

Creates  a new  folder  in  the  Finder. 
Opens  the  selected  file  or  folder. 
Deletes  the  current  selection. 
Equivalent  to  Get  Info  in  Finder. 
Shows  file  in  Finder. 

Opens  a Find  Files  dialog  box. 


Adobe  GoLive’s  context-sensitive  Toolbar  turns  into  the  Site  Toolbar 
while  the  Site  Window  is  the  active  window.  It  offers  a variety  of  site 
management  tools  for  viewing,  file  and  folder  management,  and 
FTP  access  to  Web  servers.  The  following  screenshot  illustrates  the 
shortcut  buttons  on  the  Site  Toolbar  when  the  Files  tab  is  open. 


D|_a]  lai  uuurpi  fyiiMifyi Hij FHAiraairn 


Bidirectional  update  via  FTP. 
Connects  to  Web  server  via  FTP. 
Opens  Settings  panel. 

Changes  links  across  the  board. 
Opens  the  Link  Inspector. 

■ Updates  the  Site  Window. 
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The  following  list  briefly  describes  the  buttons  on  the  Site  Toolbar 
that  you  can  use  to  perform  tasks  in  the  Files  and  FTP  tabs: 

The  New  Folder  button  creates  a new  folder — both  in  the  Site  Window  and  the  Finder. 


The  Open  button  opens  the  currently  selected  file  or  folder. 


The  Delete  selected  item  button  moves  the  currently  selected  file  or  folder  to  the  Trash. 
Before  deleting,  you  will  be  prompted  to  confirm. 


Equivalent  to  the  Get  Info  command  in  the  Finder,  the  Show  Information  in  Finder  but- 
ton displays  the  file  information  dialog. 


Equivalent  to  the  Reveal  command  in  the  Finder,  the  Reveal  in  Finder  button  shows  the 
selected  file  or  folder. 


The  Find  Files  in  Site  button  opens  the  Find  File  tab  of  the  Find  dialog  box  (see  page  592) 
to  let  you  search  files  or  folders  in  your  site. 


The  Update  button  synchronizes  the  content  of  the  Files  tab  in  the  Site  Window  with  the 
actual  content  of  the  site  folder,  adding  new  pages  and  media  files.  For  the  other  tabs 
in  the  Site  Window,  it  scans  the  pages  in  your  site  and  adds  any  E-mail  addresses  and 
URLs  found  to  the  External  tab,  colors  to  the  Colors  tab,  and  fontsets  to  the  Fontsets  tab. 
When  the  root  level  of  the  site  folder  is  displayed  in  the  file  list  of  the  Site  Window,  click- 
ing this  button  scans  the  entire  site  folder.  When  a subfolder  of  the  site  folder  is  dis- 
played, this  button  scans  the  current  subfolder  only,  ignoring  any  other  folders  in  the 
site  folder  as  well  as  the  root  level  of  the  site  folder. 


The  Open  Link  Inspector  button  opens  the  Link  Inspector  window  for  the  currently  se- 
lected page  or  resource  file  to  let  you  view  the  links  it  maintains  with  other  files. 


The  Change  all  references  button  opens  a dialog  box  that  lets  you  change  all  references 
to  the  selected  file  throughout  your  site.  For  example,  you  can  click  an  obsolete  image 
file  and  specify  a new  image  to  replace  it  on  all  pages  throughout  your  site. 

Use  this  feature  with  care;  it  is  extremely  powerful  and  there  is  no  undo  option  what- 
soever. 


The  Site  Settings  button  opens  a dialog  box  with  basic  site  settings,  such  as  homepage 
info,  FTP  server  settings,  and  preferences  for  the  Clear  Site  feature. 


The  FTP  Server  Connect/Disconnect  button  opens  an  FTP  session  with  the  server  speci- 
fied using  the  Settings...  button  described  above. 


During  an  FTP  session,  the  Upload  to  Server  button  updates  files  on  the  server,  over- 
writingthem  with  any  newer  files  from  the  local  volume.  Use  this  button  to  synchronize 
after  editing  files  on  your  local  volume. 


During  an  FTP  session,  the  Download  from  Server  button  updates  files  on  the  local  vol- 
ume, overwriting  them  with  any  newer  files  from  the  server.  Use  this  button  to  synchro- 
nize after  editing  files  directly  on  the  Web  server. 
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Site  View  Buttons  on  the  Site  Toolbar 

This  button  switches  to  Navigation  Hierarchy 
This  button  switches  to  Link  Hierarchy  mode. 
This  button  cleans  up  the  Site  View. 

This  button  opens  the  Site  Navigator  tool. 


Menu  Commands 


The  following  buttons  are  available  on  the  Site  Toolbar  while  the  Site 
tab  is  open: 


iir^imi  ai  i am  rMiramra  *ii*iaiis 

siisi  n.  J 

r 

You  can  use  the  following  buttons  on  the  Site  Toolbar  to  perform 
tasks  in  the  Site  tab: 


The  Navigation  Hierarchy  button  switches  the  Site  View  to  Navigation  Hierarchy  mode, 
where  you  can  design  the  structure  of  your  site. 


The  Link  Hierarchy  button  switches  the  Site  View  to  Link  Hierarchy  mode,  which  is  a 
view-only  mode  that  lets  you  survey  the  hierarchy  of  your  site 


Th e Arrange  button  cleans  up  the  Site  View  if  you  open  it  for  the  first  time. 


The  Open  Site  Navigator  button  opens  the  Site  Navigator  window,  which  lets  you  navi- 
gate large  sites  by  dragging  a marquee. 


You  should  be  familiar  with  these  buttons.  They  will  be  referred  to 
as  shortcuts  later  in  this  chapter. 


Two  of  Adobe  GoLive’s  menus  offer  site  management  commands. 

The  Site  menu’s  variety  of  site-specific  commands  let  you  do  the  fol- 
lowing: 

• The  options  in  the  New  submenu  let  you  add  new  items  to  the 
Site  and  Site  View  windows.  These  commands  are  equivalent  to 
the  icons  in  the  Site  tab  of  the  Palette. 

• Add  Files...  allows  you  to  copy  physical  files  to  your  site  folder. 
This  command  is  only  available  for  the  Files  tab  of  the  Site  Win- 
dow. 

• Import  Files...  enables  you  to  import  URLs  and  E-mail  addresses 
from  existing  browser  bookmark  files  and  address  books.  This 
command  is  only  available  for  the  External  tab  of  the  Site  Win- 
dow. 
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The  Site  Menu 


New 

Hdd  Files... 
Import  File... 


►► >►►►►  Group 


Change  References.. 
In  Finder 


►► 


Rescan  Root  Roldet 
Remoue  unused  Items 
Clear  “Newsletter  Site” 
Export  Site... 


Connect  to  Seruer 
Upload  to  Server 
Download  from  Seruer 

Settings...  ^ 


URL 

Rddress 
Page 
Color 
Font  Set 


Reveal  Object 

Show  Object  Information 

Launch  File 


• Change  References. . . lets  you  change  hyperlinks  or  references  to 
an  item  selected  in  the  Site  Window  in  any  page  throughout  your 
site. 

• Rescan  Root  Folder  synchronizes  the  listing  in  the  Files  tab  of  the 
Site  Window  with  the  actual  content  of  the  root  folder.  This  com- 
mand is  context-specific,  that  is,  it  changes  with  the  active  tab  of 
the  Site  Window: 

- When  the  External  tab  is  open,  this  menu  item  displays  as  Get 
References  Used.  This  command  scans  the  pages  in  the  site  for 
URLs  and  E-mail  addresses  enclosed  in  hypertext  links  and 
adds  them  to  the  External  tab  of  the  Site  Window. 

- When  the  Colors  tab  is  open,  this  menu  item  displays  as  Get 
Colors  Used.  This  command  scans  the  pages  in  the  site  for  col- 
ors and  adds  them  to  the  Colors  tab  of  the  Site  Window. 

- When  the  Fontsets  tab  is  open,  this  menu  item  displays  as  Get 
Fontsets  Used.  This  command  scans  the  pages  in  the  site  for 
fontsetsand  adds  them  to  the  Fontsets  tab  of  the  Site  Window. 

• Remove  Unused  Items  cleans  up  the  site  folder  by  moving  unref- 
erenced Web  pages  and  media  files  to  the  Site  Trash  or  Finder 
Trash.  This  command  is  context-specific,  that  is,  it  changes  with 
the  active  tab  of  the  Site  Window: 

- When  the  External  tab  is  open,  this  menu  item  displays  as  Re- 
move Unused  References.  This  command  deletes  unused  URLs 
and  E-mail  addresses  from  the  External  tab  of  the  Site  Win- 
dow. 

- When  the  Colors  tab  is  open,  this  menu  item  displays  as  Re- 
move Unused  Colors.  This  command  deletes  unused  colors 
from  the  Colors  tab  of  the  Site  Window. 
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- When  the  Fontsets  tab  is  open,  this  menu  item  displays  as  Re- 
move Unused  Fontsets.  This  command  deletes  unused  URLs 
and  E-mail  addresses  from  the  Fontsets  tab  of  the  Site  Win- 
dow. 

• Clear  Site  opens  a dialog  box  that  lets  you  add  items  used  in 
pages  throughout  your  site  to  the  respective  tabs  of  theS/fe  Win- 
dow and  move  unused  items  to  the  Site  Trash  or  Finder  Trash. 

• Export  Site...  lets  you  assemble  your  site  for  uploading. 

• The  Connect  to  Server,  Upload  to  Server,  Download  from  Server 
commands  connect  to  your  favorite  FTP  server  to  let  you  upload 
or  download  files.  These  commands  are  used  for  the  built-in  FTP 
tool  in  the  Site  Window. 

• The  Settings. ..  command  shows  basic  site  settings  (homepage 
information)  and  lets  you  make  FTP  server  settings. 

The  File  menu  contains  three  commands  that  are  relevant  for  site 
management,  plus  an  extra  command  for  downloading  Web  pages: 

• New  Site...  creates  a new  site  document  and  a site  folder  with  a 
blank  homepage  titled  index.html. 

• Import  Site  Folder...  lets  you  import  an  existing  site  by  selecting 
a folder.  Like  New  Site...,  this  command  creates  a new  site  docu- 
ment. This  site  document  lists  the  entire  content  of  the 
imported  folder. 

• New  Site...  creates  (see  page  622)  a new  site  document.  This 
command  opens  a submenu  with  three  commands: 

- Blank...  creates  a new  site  with  a blank  index.html  homep- 
age. 

- Import  Site  from  Folder. . . imports  a user-selectable  folder 
and  creates  a site  document  from  the  content  of  that  folder. 

- Import  Site  from  FTP...  lets  you  connect  to  an  FTP  server  and 
create  a site  of  the  material  you  download. 
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Site  Management  Commands 
in  the  File  Menu 


New 

86N 

New  Site... 

^586N 

New  From  Stationery  ^ 

Import  Site  Folder.. 

Open... 

860 

Open  Recent  Files 

► 

Close 

86W 

Saue 

86  S 

Saue  Rs... 

O86S 

Reuert  to  Saued 

Document  Encoding 

► 

FTP  Upload  8c  Download... 

UJUJUP  Download... 

■0860 

Page  Setup... 

Print... 

86P 

Quit 

86Q 

• FTP  Upload  & Download. . . opens  the  generic  FTP  Upload  & 
Download  window. 

• Web  Download. . . retrieves  a page  from  the  Web,  complete  with 
all  images  and  media  hies. 


The  Site  Tab  of  The  Site  tab  of  the  Palette  contains  a selection  of  generic  site  ele- 

the  Palette  ments,  including  pages,  URLs,  E-mail  addresses,  colors,  fontsets,  and 

groups  of  those  objects. 

You  can  insert  these  items  in  the  Site  Window  and  link  them  to  re- 
sources or — as  in  the  case  of  URLs  and  E-mail  addresses — use  them 
as  containers  for  resource  locators  pointing  to  other  locations  on  the 
Web. 


The5/'fetab  of  the  Palettea\so  includes  groups,  that  is,  containers  for 
similar  objects  that  help  you  better  organizeyourS/fe  Window.  When 
you  insert  a group,  the  result  depends  on  the  type  of  object  it  can 


The  Site  Tab  of  the  Palette 
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hold:  The  File  and  Media  Group  items  create  new  folders  in  the 
Finder,  while  the  URL,  Address,  and  Font  Set  Group  items  create  logi- 
cal containers  within  the  Site  Window  only. 

The  following  table  lists  the  individual  tags  in  the  Site  tab  and 
explains  how  to  use  them. 


Symbol 

Function 

Drop  this  icon  in  the  Files  tab  to  insert  a new  empty 
page. 

V 

Drop  this  icon  in  the  External  tab  of  the  Site  Windowto 
insert  a new  URL,  then  specify  the  URL  in  the  Reference 
Inspector. 

Drop  this  icon  in  the  External  tab  of  the  window  to  in- 
sert an  E-mail  address,  then  specify  the  address  in  the 
Reference  Inspector. 

y 

Drop  this  icon  in  the  Colors  tab  of  the  Site  Window  to 
insert  a favorite  color.  Name  the  color,  then  drag  a 
color  of  your  choice  from  the  Color  Palette  and  drop  it 
on  the  new  entry. 

41 

Drop  this  icon  in  the  Fontsets  tab  of  the  Site  Window  to 
insert  a newfontset.  Name  the  newfontset,  then  select 
a paragraph  with  a fontset  definition  in  the  document 
window  and  drag  it  at  the  new  entry. 

Drop  this  icon  in  the  Files  tab  of  the  Site  Window  to  in- 
sert a new  folder.  Name  the  new  folder,  then  drag  the 
desired  pages  onto  the  folder  icon.  If  the  pages  are  ref- 
erenced by  any  other  page  within  your  site,  you  will  be 
prompted  to  confirm  that  you  want  to  have  the  hyper- 
links updated.  Click  OK  to  confirm. 

sy 

Drop  this  icon  in  the  External  tab  of  theS/fe  Window  to 
insert  a group  of  URLs.  Name  the  group,  then  drag  the 
desired  URLs  onto  the  group  icon. 

Drop  this  icon  in  the  External  tab  of  the  Site  Windowto 
insert  a group  of  E-mail  addresses.  Name  the  group, 
then  drag  the  desired  addresses  onto  the  group  icon. 

Drop  this  icon  in  the  Colors  tab  of  the  Site  Window  to 
insert  a group  of  colors.  Name  the  group,  then  drag  the 
desired  colors  from  the  Colors  tab  or  the  Color  Palette 
onto  the  group  icon. 
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Symbol 

Function 

v 

Drop  this  icon  in  the  Fontsets  tab  of  theS/'fe  Window  to 
insert  a group  of  fontsets.  Name  the  group,  then  drag 
the  desired  fontsets  from  the  Fontsets  tab  ora  selection 
in  the  document  window  and  drop  them  on  the  group 
icon. 

The  following  sections  explain  the  site  management  tools  in  more 
detail. 


Part  21 — Creating  a Site  and  Importing  Resources 

Part  21  outlines  how  you  create  a site  document,  import  an  existing 

site,  and  collect  material  from  various  sources. 

• The  section  Creating  a Site,  starting  on  page  622,  tells  you  how  to 
create  a site  from  scratch  or  how  to  import  an  existing  site. 

• The  section  Multiserver  Support,  starting  on  page  718,  instructs 
you  how  to  set  up  a site  that  will  be  distributed  over  two  or 
more  Web  servers. 

• The  section  Importing  Selected  Resources,  starting  on  page  629, 
details  how  to  import  pages,  images,  and  media  files  from  the 
Finder  and  URLs  or  E-mail  addresses  from  your  favorite  Web 
browser  or  E-mail  client. 
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Site  Creation  Menu  Commands 


The  following  section  outlines  how  Adobe  GoLive  helps  you  create  a 
site  document  for  managing  pages  and  resources. 

You  have  three  alternative  ways  of  creating  a site,  each  of  which  is 
represented  by  a dedicated  option  in  the  New  Site  submenu.  The  fol- 
lowing screenshot  shows  the  submenu  that  opens  when  you  choose 
the  New  Site  command. 
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New  Special 
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Open  Recent  Files 
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Close 
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Import  from  Folder... 
Import  Site  from  FTP... 
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Following  is  a short  description  of  the  three  menu  options: 

• Blank...  (see  page  623)  lets  you  create  a new  site  in  a new  site 
folder.  This  command  prompts  you  to  select  or  create  a root 
folder.  The  new  root  folder  holds  a site  document,  a blank  folder 
for  site-specific  auxiliaries,  and  another  folder  where  you  will 
save  your  pages,  images,  and  media  hies.  Initially,  this  folder 
contains  nothing  but  a blank  homepage.  As  you  work  your  way 
through  your  site  building  project  and  save  new  hies  in  that 
folder  (or  any  of  its  subfolders),  they  will  successively  appear  in 
the  Site  Window. 

• Import  Site  from  Folder...  (see  page  624)  imports  the  content  of  a 
local  folder  or  a folder  from  any  volume  mounted  on  the  desk- 
top. To  import  a site  from  a folder,  all  you  have  to  do  is  select 
the  desired  folder  as  the  root  folder  and  specify  the  homepage. 

• Import  Site  from  FTP...  (see  page  626)  lets  you  download  existing 
material  from  an  FTP  server  and  create  a new  site  in  one  go.  After 
making  various  FTP  settings,  selecting  the  homepage  on  the 
remote  server,  and  specifying  the  target  folder  on  your  hard 
disk,  you  can  connect  to  the  server  and  launch  the  hie  transfer. 


When  you  have  designed  a couple  of  pages,  you  should  skip  the 
next  section  and  go  directly  to  the  section  Creating  a Site  by  Im- 
porting Pages  and  Resources,  starting  on  page  624. 


Creating  a Site 
from  Scratch 


The  following  section  explains  how  to  create  a site  if  you  do  not  have 
any  existing  pages  and  media.  After  creating  a new  site  document, 
you  may  wantto  layout  its  structure  hrst  before  adding  content.  Part 
24  — Designing  a Site,  starting  on  page  677,  explains  how  to  do  this. 

To  create  a new  site  document,  proceed  as  follows: 

1 Choose  New  Site...  from  the  File  menu,  then  Blank...  from  the 
submenu. 

2 A Save  file  dialog  appears.  Make  sure  the  Create  Folder  checkbox 
is  selected,  then  name  the  new  folder  in  the  New  Site  Name  text 
box.  Click  Save  to  create  the  new  folder. 

Alternatively,  you  can  deselect  the  Create  Folder  checkbox  and  select 
an  existing  folder  (which  should  be  empty)  before  saving. 
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The  Save  Site  Dialog  Box 


3 Save  your  site  document  in  the  new  root  folder. 

4 You  can  now  start  creating  Web  pages.  Double-click  the 
index.html  file  and  begin  adding  content. 


Creating  a Site  by 
Importing  Pages 
and  Resources 


The  following  section  explains  how  to  import  an  entire  site  (or  just  a 
loose  collection  of  Web  pages  and  associated  resources)  stored  in  a 
common  folder. 


Importing  a Site  From  a Local  Folder 


The  Import  Site  Folder  Dialog  Box 


Use  this  option  to  select  an  existing  folder  as  your 
site  folder. 


Use  this  option  to  select  a homepage  for  the  new 
site. 


Adobe  GoLive  provides  a convenient  way  of  importing  a complete 
site  in  onego  without  compromisingthe  integrity  of  its  links.  The  site 
may  reside  in  a folder  either  on  your  hard  disk  or  on  any  volume 
mounted  on  the  desktop. 

To  import  a complete  site  from  a local  folder,  proceed  as  follows: 

1 Choose  New  Site. . . from  the  File  menu,  then  Import  Site  from 
Folder...  from  the  submenu. 

2 The  Import  Site  Folder  dialog  box  appears,  prompting  you  to  se- 
lect the  desired  folder  and  the  homepage. 
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The  Select  Site  Folder  Dialog  Box 


The  Select  Homepage  Dialog  Box 


3  Click  the  upper  Browse  button,  then  browse  to  the  desired  site 
folder  in  the  subsequent  Select  Site  Folder  6\a\og  box.  Click  the  Se- 
lect button  at  the  bottom  of  the  window  (see  below). 


Select  site  folder: 

|j§  Desktop 
HP  LaserJet  5P 
d LaserJet  5 HP 
d LaserJet  5 Spooler 
d New  Site  f 


If  Newsletter  Site  Folder 


O Newsletter  Site  Relics 
|C1  Remaining  files 

I Select  “Newslet ...  Folder” 


- Eject 


Desktop 


Open 


4  Back  in  the  Import  Site  Folder  dialog  box,  click  the  lower  Browse 
button,  then  browse  to  the  homepage  in  the  subsequent  Select 
the  homepage  of  the  site  to  import  dialog  box.  Click  Open. 


Select  the  home  page  of  the  site  to  import: 

| Qg  Newsletter  Site  Folder  ▼)  Q Macintosh  HD 

I E-iect  I 

| Desktop  | 

[ Cancel  | 

II  °pen  l) 


5 Back  in  the  Import  Site  Folder  window,  click  the  Import  button  to 
have  Adobe  GoLive  import  the  existing  site. 

Alternatively,  you  can  specify  the  folder  to  import  by  dragging  it  from 
the  Finder  onto  the  Please  select  an  existing  site  folder  to  create  a new 
site  text  field  in  the  Import  Site  Folder...  dialog  box.  Accordingly,  the 
home  page  is  specified  by  dragging  it  onto  the  Please  select  the  Flome- 
page  of  the  existing  Site...  text  field. 

Also,  you  can  either  select  the  site  folder  or  the  homepage  and  let 
Adobe  GoLive  auto-select  the  remaining  item.  If  you  are  not  satisfied 
with  the  choice,  you  can  still  resort  to  the  manual  selection  routine 
described  above. 

6 The  imported  site  will  now  appear  in  the  left  pane  of  the  Site  Win- 
dow. If  there  are  any  orphans,  broken  links,  or  missing  items,  you 
will  be  alerted  by  error  indicators  appearing  in  the  Errors  tab  on 
the  right  side  of  the  Site  Window  (see  Error  Indicators  on  page  684 
for  reference). 
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Importing  a Site  from  an  FTP  Server 


Adobe  GoLive  provides  a convenient  way  of  importing  a site  from  an 
FTP  server  and  copying  it  to  a user-selected  local  folder.  A site  docu- 
ment is  created  in  the  process. 


To  import  a site  from  an  FTP  server,  proceed  as  follows: 

1 Choose  New  Site...  from  the  File  menu,  then  Import  Site  from 
FTP...  from  the  submenu. 

2 The  New  Site  from  FTP  Server...  dialog  box  appears,  prompting 
you  to  make  FTP  settings,  select  the  desired  target  folder  and 
specify  the  homepage. 


The  New  Site  from  FTP  Server  dialog  box 


Use  this  option  to  select  the  server  and  the  direc- 
tory path. 


Use  this  option  to  identify  yourself  by  entering  a 
password. 


if  the  server  is  protected  by  a firewall,  use  this  op- 
tion to  select  a logical  port  and  a passive  mode. 


Use  this  option  to  select  the  homepage  on  the  re- 
mote server. 


Use  th  is  option  to  select  the  target  folder  on  the  lo- 
cal volume. 


3 In  the  Server  text  box,  type  in  the  FTP  address  specified  by  your 
ISP  for  the  Web  server  you  want  to  download  the  site  from. 

4 In  the  Directory  text  box,  type  in  the  directory  path  to  your  per- 
sonal folder  on  the  Web  server. 

If  you  specifya  directory,  Adobe  GoLive  will  tryto  connecttothat 
directory.  In  most  cases,  however,  you  can  leave  this  text  box 
blank  because  your  access  privileges  will  typically  be  restricted  to 
your  personal  folder. 

5 In  the  Username  text  box,  type  in  the  user  ID  that  the  server  ad- 
ministrator gave  you. 

6 In  the  Password  text  box,  type  in  the  personal  password  you  re- 
ceived from  the  server  administrator. 
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7 Place  the  cursor  in  the  Port  text  box  and  type  in  the  number  of 
the  port  you  will  use  to  access  your  Web  server,  for  example  “21”, 
which  is  frequently  used.  If  in  doubt  about  the  port  number,  con- 
sult your  server  administrator. 

8 If  a firewall  protects  the  FTP  server,  you  may  have  to  check  the 
Use  passive  mode  checkbox  (see  page  699  fora  short  description). 

9 Clicking  the  Browse...  button  to  the  right  of  the  Please  select  a 
folder  to  create  the  new  Site  into...  text  field  opens  a dialog  box, 
prompting  you  to  select  the  target  folder  in  which  to  create  the 
new  site. 

10  Clicking  the  Browse...  button  to  the  right  of  the  Please  select  the 
homepage  on  the  remote  server...  textfield  initiates  the  server  con- 
nection and  displays  the  message  “Connecting...” 

11  The  subsequent  Select  Home  Page  dialog  prompts  you  to  select 
the  homepage  of  the  site  you  want  to  download.  Make  your 
choice,  then  click  OK.  (It  may  take  some  time  to  update  the  files 
list). 

12  Adobe  GoLive  returns  to  the  New  Site  from  FTP  Server...  dialog 
box.  Click  OK  to  start  downloading. 

13  When  Adobe  GoLive  is  done  downloading,  it  will  create  an  unti- 
tled sitedocumentand  display  thefiles  of  the  newly  downloaded 
site  in  the  Site  Window. 

14  Save  the  site  document  and  start  editing  your  site. 

After  importing  a site  via  FTP,  don’t  forget  to  disconnect  in  the 

PPP  control  panel. 

Handling  Orphan  Files 

When  importing  a site,  there  are  two  main  reasons  for  errors: 

• Broken  links  usually  occur  when  the  user  renames  or  deletes  a 
file  in  the  Finder  without  editing  the  hyperlinks  or  references  in 
the  parent  file.  For  instructions  on  how  to  troubleshoot  broken 
links,  please  refer  to  Part  25 — Site  Maintenance,  starting  on 
page  684. 

• A file  referenced  by  a page  within  the  imported  site  folder  is 
stored  in  another  folder.  This  problem  requires  no  major  trou- 
bleshooting effort,  so  we  will  deal  with  it  right  now. 
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To  solve  an  orphan  file  problem,  proceed  as  follows: 

1  Look  at  the  right  pane  of  the  Site  Window.  An  “orphan  file”  mes- 
sage has  appeared  to  alert  you  to  the  problem  that  a referenced 
file  is  not  in  the  site  folder.  An  example  follows. 


An  Orphan  File  in  the  Site  Window 


After  importing  an  existing  site,  orphan  files  may 
appear  in  the  Errors  tab  on  the  right  side  of  the 
Site  Window. 


2 Drag  the  orphan  file  entry  into  an  appropriate  folder  in  the  left 
pane  of  the  Site  Window.  This  copies  the  file  into  the  site  folder, 
leaving  the  original  file  in  place. 

3 The  dialog  box  shown  below  appears,  prompting  you  to  confirm 
whether  you  want  to  copy  the  orphan  file  to  the  site  folder.  Click 


The  Clear  Site  Dialog  Box 

OK. 

A The  following  files  are  referenced  and  will  be  copied  into 

the  site  folder  : 

Update  1 URL 

0 

The  file  that  needs  to  be  copied  to  the  site  folder 

0 /Macintosh  HD/Desktop  Folder /pagel  .html 

is  listed  here. 

[► 

( Cancel  ] |f  OK 

) 

4 Another  dialog  box  appears,  prompting  you  to  confirm  whether 
you  want  to  have  all  references  to  that  file  updated  to  reflect  its 
new  location  in  the  site  folder.  Click  OK. 

5 The  orphan  file  message  should  now  disappear,  indicating  that 
the  problem  has  been  solved. 

Tip:  You  can  also  use  the  Clear  Site  command  (see  the  section 
Clearing  the  Site  Folder  on  page  641)  to  have  Adobe  GoLive  copy 
orphan  files  to  the  site  folder. 
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Importing  Selected 
Resources 


The  following  section  instructs  you  howto  import  selected  resources 
from  the  Macintosh  Finder  or  Internet  programs  after  creating  a site 
document.  You  can  import  Web  pages,  images,  media  files,  and  even 
bookmark  files  or  address  books  from  your  favorite  Web  browser. 


When  you  import  files,  Adobe  GoLive  will  duplicate  and  copy 
them  to  the  site  folder,  leaving  the  original  files  untouched. 


Importing  from  the  p=j— 
Finder  _•  > 


To  add  a selection  of  files  from  the  Finder  to  the  site  document,  pro- 
ceed as  follows: 

1 Switch  to  the  Finder  and  open  or  locate  the  folder  that  contains 
the  desired  files. 

2 Select  the  desired  files  or  folders,  then  drag  them  at  the  Files  tab 
of  the  Site  Window.  When  the  mouse  pointer  enters  the  area  of 
the  Site  Window,  a small  plus  sign  appears  next  to  the  cursor  *+ 
to  indicate  that  the  files  will  be  copied  to  the  site  folder. 

The  following  screenshot  illustrates  the  process  of  drag  & drop 
importing  resources  from  the  Macintosh  Finder. 


Drag  & Drop  Importing  Resources 

If  the  Files  tab  is  not  open,  drag  your  files  onto 
the  tab  rider.  Hold  the  mouse  button  and  wait 
for  the  tab  to  open,  then  drag  on  to  the  main 
window  area. 


Select  files  in  the  Finder  and  drag  them  onto  the 
Files  tab  of  the  Site  Window. 


3 If  you  notice  that  the  Files  tab  is  not  open  while  you  are  already 
dragging,  drag  the  files  on  the  tab  rider  first  to  open  it.  Do  not  re- 
lease the  mouse  button;  wait  for  the  tab  to  open,  then  drag  the 
files  onto  the  main  window  area  of  the  Files  tab. 

You  can  use  the  same  technique  when  copying  files  to  a closed 
folder.  Folders  in  the  Files  tab  of  the  Site  Window  inherit  the 
“spring-loaded”  property  from  the  Macintosh  Finder. 

Alternatively,  you  can  choose  the  Add  Files  command  from  the  Site 
menu  to  import  HTML  pages  and  other  file  resources.  The  following 
section  explains  this  method: 
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To  add  pages  or  other  file  resources  to  the  site  using  the  Add  Files 
command,  proceed  as  follows: 

1  Choose  the  Add  Files  command  from  theS/'fe  menu. 


The  Add  Files  Dialog  Box 

Click  to  select  a file  or  folder  from  the  list  box. 


Click  Add,  Add  Folder,  or  Add  All  to  import. 

Click  here  to  create  a preview  for  the  current  file. 
Click  here  to  remove  a selection. 

Click  Remove  or  Remove  All  to  deselect  files. 
Click  Done  to  start  importing. 

Click  here  to  toggle  previewing  on  and  off. 
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2 In  the  subsequent  file  selection  dialog  box,  click  to  select  a file  or 
folder  from  the  list  box. 

3 If  desired,  click  Create  to  have  Adobe  GoLive  build  a preview  of  an 
image  or  the  title  frame  of  a movie. 

4 Click  Add  to  add  the  file  selected  in  step  2 above  to  the  Select 
items  to  add  list,  cWckAdd  Folderto  add  a folder,  or  click  Add  All 
to  add  all  files  and  folders  from  the  list  box. 

5 To  modify  your  selection  prior  to  importing,  click  Remove  to  de- 
lete a selected  file  from  the  Select  Items  to  add  list,  or  click  Re- 
move All  to  remove  all  files  and  folders  from  the  list. 

6 When  you  finish  selecting,  click  Done  to  let  Adobe  GoLive  import 
the  selected  resources. 


Importing  URLs  and  Adobe  GoLive  offers  two  ways  of  obtaining  external  URLs  and  E-mail 

E-Mail  Addresses  addresses  for  use  in  your  site: 

• You  can  drag  & drop  or  cut  & paste  to  import  addresses  and 
URLs  from  the  main  window  area  of  your  favorite  Web  browser. 

• You  can  load  entire  bookmark  files  and  address  books  from  the 
Preferences  folder  of  your  Web  browser. 
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To  import  individual  URLs  and  E-mail  addresses  from  a browser  (or 

any  other  application  that  supports  drag  & drop),  proceed  as  follows: 

1 Open  your  favorite  Web  browser. 

2 Select  an  URL  or  E-mail  address  in  the  browser’s  main  window 
and  drag  it  onto  Adobe  GoLive’s  External  tab. 

If  the  External  tab  is  not  open,  drag  your  selection  on  the  External 
tab  rider,  wait  for  Adobe  GoLive  to  open  the  External  tab,  then 
drag  on  and  drop  the  URL  or  address  in  the  main  window  area. 

To  import  an  individual  URL  that  you  have  already  visited  and  book- 

marked  with  your  browser,  proceed  as  follows: 

1 Open  your  favorite  Web  browser — for  example,  Netscape  Naviga- 
tor. 

2 Switch  to  the  browser  window  and  select  a bookmark  from  the 
Bookmarks  menu. 

3 Highlight  the  URL  in  Netscape  Navigator’s  Location  text  box  and 
choose  the  Copy  command  from  the  Edit  menu  or  press  Com- 
mand-C. 

4 Return  to  Adobe  GoLive  and  open  the  External  tab  of  the  Site  Win- 
dow. 

5 Drag  a generic  URL  icon  from  the  S/fe  tab  of  the  Palette  and  drop 
it  in  the  External  tab. 

6 With  the  generic  URL  selected,  double-click  to  select  the  http:// 
www.untitled.1  entry  in  the  URL  text  box  of  the  Reference  Inspec- 
tor. 

7 Choose  the  Paste  command  from  the  Edit  menu  or  press  Com- 
mand-V  to  paste  the  URL  from  the  clipboard,  overwriting  the  ge- 
neric URL  in  the  URL  text  box. 

8 Press  the  Return  key  to  confirm  your  entry. 

9 Place  the  cursor  in  the  Name  text  box,  name  the  new  URL  (over- 
writing the  generic  Untitled  URL  name),  and  press  the  Return  key 
to  confirm  your  entry. 
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To  import  a bookmark  file,  address  book,  or  plain  text  file  using  the 
Import  File  command,  proceed  as  follows: 

1  Go  to  the  Site  menu  and  choose  Import  File. 


The  Import  File  Dialog  Box 


Click  to  select  a file  from  the  list  box. 


Click  Open  to  start  importing. 


Select  a Bookmarks,  flddressBook,  Favorites  or 
Nicknames  file  to  import: 
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Mail 
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g Pop  State 

- 

2  In  the  subsequent  file  selection  dialog  box,  click  to  select  a file 
from  the  list  box. 


You  can  import  any  bookmark  file  or  address  book  created  by 
Netscape  Navigator,  Favorites  file  created  by  Microsoft  Internet 
Explorer,  and  Nicknames  file  created  by  Eudora. 


3 Click  the  Open  button,  press  the  Return  key,  or  double-click  the 
bookmark  file  to  start  importing. 

4 Adobe  GoLive  will  import  the  bookmark  file  or  address  book  as  a 
URL  Group  or  Address  Group. 


Part  22 — Managing  Resources 

Part  22  discusses  how  to  manage  file  and  resources  in  Adobe  GoLive’s 

Site  Window  and  addresses  the  following  topics: 

• The  Finder-Style  File  Management  section,  starting  on  page  633, 
explains  how  you  can  benefit  from  Adobe  GoLive’s  tight  integra- 
tion with  the  Macintosh  Finder  to  manage  your  site  with  ulti- 
mate ease. 

• The  Clearing  the  Site  Folder  section,  starting  on  page  641 , details 
how  you  keep  the  site  folder  clear  of  unused  items. 

• Managing  Files  Using  the  File  Inspector,  starting  on  page  644, 
outlines  how  you  can  view  and  set  the  properties  of  files 
selected  in  the  Site  Window. 
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• The  Managing  Stationery  in  the  Site  Window  section,  starting  on 
page  650,  tells  you  how  to  create  stationery  in  the  Site  Window 
and  what  you  can  use  it  for. 

• Managing  URLs  and  E-Mail  Addresses  in  the  Site  Window,  starting 
on  page  651,  describes  how  to  manage  URLs  and  E-mail 
addresses  using  the  Reference  Inspector. 

• The  section  Managing  URLs  and  E-Mail  Addresses  in  the  Site  Win- 
dow on  page  651,  explains  how  to  keep  often-used  colors  handy 
for  drag  & drop  insertion. 

• The  section  Managing  Colors  in  the  Site  Window,  starting  on 
page  654,  teaches  how  to  import  and  build  fontsets  you  want  to 
reuse  in  pages  throughout  your  site. 

• Changing  Elyperlinks  and  File  References,  starting  on  page  660, 
discusses  how  to  change  all  references  to  a file  at  once. 

• The  section  Toggling  Between  the  Site  Window  and  Document 
Windows,  starting  on  page  661 , describes  using  the  toolbar  to 
switch  from  documents  in  the  Layout  view  and  the  Site  Window. 


Finder-Style  File 
Management 


As  already  noted  in  this  chapter’s  introduction,  the  Site  Window  is 
tightly  integrated  with  the  Finder,  allowing  you  to  perform  many  file 
management  tasks  exactly  as  in  your  familiar  Mac  OS  user  interface. 

You  can  create  folders,  move  files  around,  duplicate,  rename,  and 
even  delete  files  by  dragging  them  to  the  Finder’s  Trash.  Any  file  in 
the  Site  Window  (even  image  files  and  other  resources)  opens  in  its 
native  creator  application  when  you  double-click  its  icon.  As  in  the 
Mac  OS  8 Finder,  folders  displayed  in  the  Site  Window  are  spring- 
loaded,  that  is,  they  pop  open  when  you  drag  a file  on  them  and  wait 
a few  seconds.  Adobe  GoLive’s  site  management  tool,  however,  not 
only  lets  you  handle  files  “Finder-style”  but  it  also  monitors  the  in- 
tegrity of  hyperlinks  between  pages  and  references  to  images  and 
media  files,  prompting  you  to  update  all  file  references  when  you 
change  the  underlying  file  structure. 

For  instructions  on  saving  Web  pages  created  in  Adobe  GoLive  to  the 
current  site,  please  refer  to  the  section  Saving  Your  Page  on  page  108 
in  Chapter  4,  Building  Web  Pages. 
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Opening  Files 


Like  the  Macintosh  Finder,  the  Site  Window  lets  you  open  Web  pages 
by  double-clicking.  Additionally,  Adobe  GoLive  lets  you  open  any  file 
with  the  proper  fileiame  extension,  provided  that  its  native  applica- 
tion is  installed  on  your  hard  disk  and  you  have  specified  the  correct 
file  mapping  preferences  in  the  Preferences  - General  - File  Mapping 
dialog  box  shown  below. 

Double-clicking  Scenarios 

Here  are  the  scenarios  Adobe  GoLive  can  handle  when  the  user  dou- 
ble-clicks a non-HTML  file  in  the  Site  Window. 

• File  without  a filename  extension  and  with  unknown  creator: 
Double-clicking  opens  MacOS  EasyOpen  (if  enabled),  where  you 
can  choose  an  external  application  that  should  open  the  file. 

• File  without  a filename  extension  but  known  creator:  Double- 
clicking opens  the  file  in  its  creator  application. 

• File  with  filename  extension  but  unknown  creator:  If  you  use  the 
options  in  the  File  Mapping  dialog  box  to  specify  an  application 
for  the  filename  extension,  double-clicking  will  open  the  file  in 
that  application. 

File  Mapping  Options 

Adobe  GoLive  can  use  file  mapping  preferences  from  various 
sources: 

• You  can  use  Adobe  GoLive’s  default  file  mappings. 

• You  can  specify  your  own  file  mapping  preferences  (see  the  fol- 
lowing section). 

• You  can  import  file  mappings  already  specified  in  Internet  Con- 
fig,  merging  them  with  your  own  file  mapping  preferences  (see 
Using  File  Mappings  from  Internet  Config  exclusively  on 

page  636). 

• You  can  use  file  mappings  specified  in  Internet  Config  through- 
out and  have  Adobe  GoLive  ignore  the  settings  in  the  File  Map- 
ping dialog  box  (see  Merging  File  Mappings  from  Internet  Config 
and  Adobe  GoLive  on  page  636). 
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Specifying  Your  Own  File  Mapping  Preferences 


The  Preferences  - General  - File  Mapping 
Dialog  Box 

Check  this  option  if  you  want  Adobe  GoLive  to  to 
open  files  in  their  native  applications. 


Use  this  option  to  specify  the  application  to  be 
launched  when  the  user  double-clicks  a file  icon 
in  the  Site  Window  or  an  item  in  the  document 
window 


Use  this  popup  menu  to  select  an  application  in- 
stalled on  your  hard  disk. 


Click  this  button  to  create  a new  file  mapping 
preference. 


You  can  have  Adobe  GoLive  control  file  mapping  and  specify  your 
own  choice  of  applications  for  typical  Internet  file  formats. 

To  specify  your  own  file  mapping  preferences,  proceed  as  follows: 

1 Choose  Preferences...  from  the  Edit  menu  to  open  the  Preferences 
dialog  box. 

2 Click  the  small  arrow  next  to  the  General  icon  to  expand  that 
group  of  options,  then  choose  File  Mapping. 
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3 Activate  the  Enable  file  open  in  other  applications  checkbox. 

4 Choose  Custom  from  the  popup  menu  above  the  mappings  list. 

5 Choose  a file  format  from  the  list.  The  current  settings  appear  in 
the  Suffix,  MIME  Type  and  Kind  text  boxes. 

6 Choose  Browse...  from  the  popup  menu  next  to  the  filename  ex- 
tension text  box. 

7 Locate  and  choose  the  desired  application  in  the  subsequent  file 
selection  dialog. 

8 Click  OK,  then  try  out  the  file  new  mapping  preferences. 
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Using  File  Mappings  from  Internet  Config  exclusively 


To  allow  Internet  Config  to  control  file  mappings  within  Adobe 

GoLive,  proceed  as  follows: 

1 Choose  Preferences...  from  the  Edit  menu  to  open  the  Preferences 
dialog  box. 

2 Click  the  small  arrow  next  to  the  General  icon  to  expand  that 
group  of  options,  then  choose  File  Mapping. 

3 Activate  the  Enable  file  open  in  other  applications  checkbox. 

4 Choose  Internet  Config  from  the  popup  menu  above  the  map- 
pings list. 

5 Click  OK,  then  try  out  the  imported  file  mapping  preferences. 


Merging  File  Mappings  from  Internet  Config  and  Adobe  GoLive 


To  use  file  mappings  specified  in  Internet  Config  and  merge  them 

with  the  default  (or  your  own)  file  mapping  preferences,  proceed  as 

follows: 

1 Choose  Preferences...  from  the  Edit  menu  to  open  the  Preferences 
dialog  box. 

2 Click  the  small  arrow  next  to  the  General  icon  to  expand  that 
group  of  options,  then  choose  File  Mapping. 

3 Activate  the  Enable  file  open  in  other  applications  checkbox  (if  dis- 
abled). 

4 Choose  Custom  from  the  popup  menu  above  the  mappings  list. 

5 Click  the  Merge  button  next  to  the  Internet  Config  option. 

6 Click  OK,  then  check  the  newly  specified  file  mapping  preferenc- 
es. 


Please  note  that  your  own  custom  preferences  may  be  over- 
written when  merging  them  with  preferences  from  Internet 
Config.  This  happens  when  two  items  refer  to  the  same  filena- 
me extension. 


Opening  Double-byte  Encoded  Foreign-language  Files 

The  Site  Window  provides  a convenient  shortcut  for  opening  im- 
ported foreign-language  files  that  do  not  contain  the  proper  encod- 
ing information  in  their  page  headers.  You  can  use  this  shortcut  if 
the  appropriate  language  kit  is  installed  on  your  Mac  and  if  you 
know  the  encoding  used  when  creating  the  foreign-language  file. 
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The  Select  Encoding  Dialog  Box 


To  open  an  imported  foreign-language  file  with  double-byte  encod- 
ing from  within  the  Site  Window,  proceed  as  follows: 

1 Locate  the  imported  file  in  the  Files  tab  of  the  Site  Window. 

2 Make  a backup  copy — for  example,  by  creating  a folder  and  Op- 
tion-dragging the  file  to  the  newly  created  folder. 

3 Option-double-click  the  file  icon. 


4 The  Select  Encoding  dialog  box  shown  above  appears. 

5 Select  the  proper  encoding  from  the  Encoding  menu. 

6 Click  the  Open  button. 

7 Adobe  GoLive  will  open  the  file  and  add  the  encoding  to  the  page 
header. 


Creating  Folders  and 
Groups 


Arranging  your  file  resources  in  specific  folders  and  your  non-file-ob- 
jects in  groups  provides  a convenient  way  of  reducing  clutter  in  your 
site  building  project.  There  is  one  folder  or  group  for  each  class  of  ob- 
jects. The  following  instructions  refer  to  creating  a new  folder  for 
physical  files.  Fora  complete  reference  on  folders  and  groups,  please 
see  The  Site  Tab  of  the  Palette,  starting  on  page  620. 

To  create  a folder,  proceed  as  follows: 

1 Click  anywhere  in  the  left  pane  of  the  Files  tab  to  make  it  the  ac- 
tive window  section. 

2 Click  the  New  Folder  button  in  the  Site  Toolbar  (see  page  616), 
choose  New  ->  Group  from  the  Site  menu,  or  drag  a File  Group 
icon  from  the  Palette  (see  page  621)  and  drop  it  in  the  files  list  in 
the  left  pane  of  the  Site  Window. 

3 Type  in  a folder  name  in  the  Name  text  box  of  the  context-sensi- 
tive Inspector  window,  now  titled  Folder  Inspector. 
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The  Folder  Inspector 

Use  this  text  box  to  name  the  newly  created 
folder. 


Use  this  popup  menu  to  specify  a condition  for 
publishing  the  page. 

This  popup  menu  lets  you  choose  a Finder  label. 


These  text  fields  display  general  folder  informa- 
tion that  the  Finder  supplies. 


I Never  | 


4 Choose  an  option  from  the  Publish  popup  menu  if  you  want  to 
have  the  folder  included  in  the  published  version  of  the  site 
when  using  the  Export  Site...  option  (see  Exporting  Your  Site  in 
page  701).  You  have  the  following  options: 

- Never  excludes  the  folder  from  publishing  altogether. 

- Always  publishes  the  folder  unconditionally. 

- If  not  empty  publishes  the  folder  only  if  it  contains  at  least 
one  file. 

5 Drag  the  desired  files  into  the  folder. 


Moving  Files  via 
Drag  & Drop 


The  Site  Window  gives  you  the  flexibility  to  arrange  the  items  in  your 
site  folder  exactly  the  way  you  need  them  without  compromising  the 
integrity  of  hyperlinks  and  hie  references.  When  you  drag  a hie  into 
another  folder,  Adobe  GoLive  ensures  that  its  links  and  hie  references 
are  rewritten  to  reflect  the  new  location. 

To  move  a hie  into  another  folder,  proceed  as  follows: 

1 Drag  the  file  onto  another  folder.  If  you  want  to  see  its  contents, 
wait  until  the  folder  pops  up,  then  drop  the  file. 

2 A dialog  box  appears,  asking  if  you  want  Adobe  GoLive  to  update 
hyperlinks  and  file  references.  This  dialog  box  lists  all  files  that 
are  affected  by  the  move. 

Click  OK  to  update  both  the  file’s  own  hyperlinks  and  file  refer- 
ences as  well  as  those  in  any  file  that  references  it. 
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The  Move  Files  Dialog  Box 


Deselect  this  checkbox  if  you  want  to  exempt  all 
files  from  updating. 

Deselect  any  checkbox  if  you  want  to  exempt  a file 
from  updating. 

Any  files  that  need  to  be  updated  are  listed  here. 


3 View  the  result  in  the  Site  Window : The  files  have  been  moved  to 
the  desired  location.  All  hyperlinks  and  files  references  are  still 
intact,  so  there  are  no  error  indicators. 

4 When  you  have  opened  a folder  while  moving  the  file,  use  the 
Folders  and  Groups  Navigation  menu  (see  page  613)  to  return  to 
your  point  of  departure. 


You  can  use  the  checkboxes  in  the  Move  Files  dialog  box  to  ex- 
clude selected  files  from  updating,  but  be  aware  that  broken 
links  and  invalid  file  references  will  result. 


Duplicating  Files 


You  can  duplicate  files  or  folders  in  the  Site  Window  using  exactly  the 
same  menu  commands  and  keyboard  shortcuts  as  in  the  Finder. 

To  duplicate  a file  or  folder,  proceed  as  follows: 

1 Select  the  item  or  items  to  be  duplicated  in  the  Files  tab  of  the 
Site  Window. 

2 Choose  Duplicate  from  the  Edit  menu  or  press  Command-D. 

3 A copy  of  the  duplicated  item  appears  in  the  Site  Window.  A digit 
is  appended  to  the  name  of  the  duplicate:  For  example,  duplicat- 
ing bckgrnd.gif  creates  a file  named  bckgrndt.gif. 


Deleting  Files  Adobe  GoLive’s  Site  Window  gives  you  alternative  ways  of  deleting 

files  or  folders.  You  can  delete  by  using  a keyboard  shortcut  or  a but- 
ton on  the  Toolbar  (which  moves  the  selected  items  to  the  Site  Trash 
or  the  Finder  Trash)  or  by  dragging  directly  to  the  Finder  Trash. 
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Recovering  Deleted  and 
Removed  Files 


Viewing  the  Content  of  the  Site  Trash  in 
the  Extra  Tab 


The  Site  Trash  appears  as  a folder  in  the  Extra  tab  of 
the  Site  Window. 
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To  delete  a file  or  folder,  proceed  as  follows: 

1 Select  the  item  or  items  you  want  to  remove  from  the  files  list. 

2 Click  the  Delete  selected  item  button  □B  in  the  Toolbar,  press 
Command-  Backspace,  or  drag  the  selection  to  the  Finder  Trash. 

3 When  prompted  to  confirm  the  deletion,  click  Move  (see  below). 


Rre  you  sure  you  want  to  moue 
“neiustyle.css”  to  the  Site  Trash? 


[ Cancel  | | Moue 


4  Adobe  GoLive  indicates  where  the  files  will  be  moved,  depending 
on  the  settings  made  in  the  Site  Preferences.  (For  instructions,  see 
the  section  The  Site  Preferences  Dialog  Box  on  page  709.) 

If  the  selected  items  are  moved  to  the  Site  Trash,  which  is  the  de- 
fault setting,  you  can  recover  them  as  explained  below. 


Files  removed  from  the  site  folder  by  the  clear  routine  (see  below)  as 
well  as  files  deleted  using  the  Backspace  key  or  the  Delete  selected 
item  button  are  either  moved  to  the  Finder  Trash  or  to  the  Site  Trash, 
depending  on  the  settings  in  the  Site  Preferences  (see  page  709). 

If  they  are  moved  to  the  Finder  Trash,  you  can  only  recover  them  in 
the  Finder  by  double-clicking  the  Trash  icon  on  the  desktop  and 
dragging  the  files  back  to  the  site  folder. 

If  they  are  moved  to  the  Site  Trash,  you  can  easily  recover  them  from 
within  the  Site  Window  or  move  them  on  to  the  Finder  Trash,  as  de- 
sired. 
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Clearing  the 
Site  Folder 


[j;«agai 

Click  the  icon  bar  to 
display  the  right 
pane  of  the  Site 
Window. 


To  recover  files  from  the  Site  Trash  or  move  files  on  to  the  Finder 
Trash,  proceed  as  follows: 

1 If  the  Site  Window  is  in  single-pane  mode,  click  the  icon  bar  in  the 
upper  right  corner  of  the  Site  Window  to  display  the  right  pane, 
then  click  the  vertical  tab  rider  labeled  Extra. 

If  the  Site  Window  is  in  dual-pane  mode,  click  the  vertical  tab  rid- 
er labeled  Extra  in  the  right  pane. 

2 Locate  the  Site  Trash  folder  icon  and  click  the  small  triangle  con- 
trol to  view  the  content  of  the  folder. 

3 To  undo  the  deletion,  drag  the  file  you  want  to  recover  back  to 
its  previous  location  in  the  files  list  in  the  left  pane  of  the  Site 
Window. 

To  move  files  on  to  the  FinderTrash,  select  the  item  to  be  deleted 
in  the  Site  Trash  folder,  then  click  the  Delete  selected  item  button 
OB  i n the  Toolbar,  press  the  Backspace  key,  or  drag  the  selection 
to  the  Finder  Trash. 


The  “one  site,  one  folder”  principle  imposes  two  basic  housekeeping 

rules  for  your  site: 

• The  site  folder  must  contain  any  file  object  used  in  your  site, 
including  Web  pages,  images,  and  media  files.  Also,  any  non-file 
object,  including  URLs,  E-mail  addresses,  colors,  and  fontsets, 
used  should  be  available  site-wide  on  the  External,  Colors,  and 
Fontsets  tabs  of  the  Site  Window. 

• Keep  the  site  folder  clear  of  files  that  don’t  belong  in  it  because 
they  are  not  referenced  by  any  page  in  the  site. 

To  do  this,  call  up  a cleanup  routine  that  prompts  you  to  specify 

which  copy  and  delete  operations  should  be  performed: 

• It  copies  external  files  referenced  in  your  site  to  the  site  folder. 

• It  extracts  non-file  objects  from  the  pages  within  your  site  and 
copies  them  to  the  External,  Colors,  and  Fontsets  tabs  of  the  Site 
Window. 

• It  moves  excess  files  to  the  Site  Trash  (default)  or  FinderTrash, 
depending  on  the  settings  in  the  Site  Preferences.  (For  instruc- 
tions, see  the  section  The  Site  Preferences  Dialog  Box  on 

page  709.) 

• It  removes  unused  non-file  objects  from  the  External,  Colors, 
and  Fontsets  tabs  of  the  Site  Window. 
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To  clear  your  site  folder,  proceed  as  follows: 

1 Select  the  Clear  Site  command  from  the  Site  menu. 

2 The  Clear  Site  dialog  box  shown  below  appears. 


The  Clear  Site  Options  Dialog  Box 


Use  these  options  to  specify  what  will  be  copied 
to  the  site  folder  and  site  document. 


Use  these  options  to  specify  what  will  be 
removed. 


Select  this  checkbox  if  you  wantAdobe  GoLive  to 
default  to  the  current  settings. 


{ 

{ 


- Clear  Site 

Rescan  root  folder 
Add  used 

0 Files  (will  be  copied  into  root  folder) 

0 Show  list  of  files  to  copy 
0 External  References 
0 Colors 

0 Fontsets 

Remove  unused 

1 I Files  (will  be  moved  to  trash) 

1 I Show  list  of  files  to  remove 

I I External  References 

I I Colors 

I I Fontsets 

■a  Don't  show  again 

Set  .s  default  | | Cancel  | [|  OK  ]| 


3 Select  the  Rescan  root  folder  checkbox  to  have  Adobe  GoLive  res- 
can the  site  folder  and  update  the  file  list. 

4 Go  to  the  Add  used  group  of  options  and  check: 

- Files  to  have  Adobe  GoLive  copy  all  external  files  that  are  ref- 
erenced by  pages  within  your  site  to  the  site  folder 

- Show  list  of  files  to  copy  to  see  which  files  will  be  added 

- External  References,  Colors,  and  Fontsets  to  have  Adobe  GoLive 
scan  all  pages  within  your  site  for  URLs,  E-mail  addresses,  col- 
ors, and  fontsets  and  copy  them  to  the  appropriate  tabs  of 
the  Site  Window 

5 Go  to  the  Remove  unused  group  of  options  and  check: 

- Files  to  have  Adobe  GoLive  move  all  files  not  referenced  in 
your  site  to  the  Site  Trash  or  Finder  Trash 

- Show  list  of  files  to  remove  to  see  which  files  will  be  removed 

- External  References,  Colors,  and  Fontsets  to  have  Adobe  GoLive 
removeall  URLs,  E-mail  addresses,  colors,  and  fontsets  stored 
but  not  used  in  your  site 


Deleting  non-file  objects,  such  as  URLs,  E-mail  addresses,  col- 
ors, and  fontsets,  removes  them  without  any  recovery  option, 
so  use  these  checkboxes  with  care. 
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6 Click  Don’t  show  again  if  you  want  Adobe  GoLiveto  hide  the  Clear 
Site  dialog  box.  To  undo  this,  check  the  Show  options  checkbox  in 
the  Clear  Site  pane  of  the  Site  Settings  dialog  (see  below). 

7 Click  Set  as  default  if  you  want  Adobe  GoLiveto  default  to  the  cur- 
rent settings  and  set  the  options  in  the  Clear  Site  pane  of  the  Site 
Settings  dialog  accordingly  (see  below). 

8 Click  OK.  Another  dialog  box  appears,  prompting  you  to  confirm 
that  you  want  to  copy  and/or  remove  files  and  non-file  objects. 
Click  OK  again  to  have  Adobe  GoLive  clear  your  site. 


Setting  Preferences  for  the  Clear  Site  Command 


The  Clear  Site  Pane  of  the  Site  Settings 
Dialog  Box 


Click  the  Clear  Site  icon  to  set  the  preferences  for 
the  Clear  Site  command. 


The  Clear  Site  pane  of  the  Site  Settings  dialog  box  contains  the  same 
set  of  options  as  the  Clear  Site  dialog  box.  You  can  use  this  dialog  to 
set  permanent  preferences  for  the  Clear  Site  command. 


_r 


To  set  preferences  for  the  Clear  Site  command,  proceed  as  follows: 

1 Click  the  Site  Settings  button  [ID  in  the  SiteToolbar,  then  click  the 
ClearSite  icon  in  the  left  section  of  the  Site  Settings  dialog  box. 

2 Set  your  personal  preferences  using  the  options  described  in  the 
preceding  section. 

3 Select  the  Show  options  dialog  checkbox  if  you  want  Adobe 
GoLive  to  display  the  ClearSite  dialog  box  every  time  you  choose 
the  ClearSite  command,  undoing  a possible  Don’t  show  again  se- 
lection made  in  the  Clear  Site  dialog  box. 
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Managing  Files  Using  The  File  Inspector  is  a tool  that  assists  you  in  managing  the  file  ob- 

the  File  Inspector  jects  that  your  site  uses.  Depending  on  what  type  of  file  object  you 

click  in  the  Site  Window,  the  context-sensitive  File  Inspector  window 
changes  its  appearance  to  let  you  view  general  file  properties,  such 
as  status  and  Finder-related  information,  or  the  content  of  Web  pag- 
es, image  files,  and  media  files. 

In  addition  to  its  viewing  functionality,  the  File  Inspector  also  lets  you 
rename  files. 


Inspecting  Pages 


The  Page  Tab  of  the  File  Inspector 


This  text  field  lets  you  edit  the  title  of  your  page. 

This  text  field  shows  the  language  encoding  used 
in  the  inspected  page. 

This  popup  menu  lets  you  select  a user-defined 
status. 

This  option  is  checked  if  the  current  page  is  your 
homepage. 


You  can  use  the  Page,  File,  and  Content  tabs  of  the  File  Inspector  to 
obtain  HTML-specific  and  Finder-related  file  information  and  view 
the  content  of  a Web  page. 

To  view  HTML-specific  file  information,  proceed  as  follows: 

1 In  the  Site  Window,  click  the  icon  of  the  desired  page. 

2 Open  the  Inspector  window,  now  titled  File  Inspector. 

3 Click  the  Page  tab. 


4  The  Page  tab  lets  you  view  and  set  the  following  options: 

- The  Title  text  field  contains  the  title  of  the  HTML  page,  as  en- 
tered into  the  head  section  ofthedocumentand  displayed  in 
the  title  bar  of  the  browser. 

- The  Encodings  text  field  shows  the  encoding  meta  informa- 
tion that  the  head  section  of  the  page  contains. 

- The  Status  popup  menu  lets  you  select  a user-defined  status 
for  the  current  page.  This  status  can  give  useful  hints  to  other 
people  handling  your  site — for  example,  co-authors.  The 
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Preferences  - Site-  Page  Status  dialog  box  defines  the  publish- 
ing statuses  (see  page  713). 

If  grayed  out  and  checked,  the  Home  Page  checkbox  indicates 
that  the  current  page  is  the  homepage  of  your  site.  A home- 
page  is  usually  already  in  place  when  you  import  an  existing 
site  or  create  a new  site  from  scratch. 

If  you  want  to  rebuild  the  structure  of  your  site,  you  can  pick 
another  page  and  select  this  checkbox  to  make  that  page 
your  homepage. 

To  view  and  set  Finder-related  file  information,  such  as  file  name, 
Finder  label,  and  Stationery  status,  proceed  as  follows: 

1 With  the  Web  page  still  selected,  click  the  File  tab  of  the  File  In- 
spector. 


The  File  Tab  of  the  File  Inspector 


Click  here  to  rename  your  file. 

This  text  field  shows  the  folder  path  to  the  file. 

Check  this  option  to  use  the  current  document  as 
a template  for  other  pages. 

Use  this  popup  menu  to  specify  a condition  for 
publishing  the  page. 

This  popup  menu  lets  you  choose  a Finder  label. 


These  text  fields  display  general  document 
information  that  the  Finder  supplies. 


Page  f File  ^ Content 


File  Inspector 


-Name  lndex.html 


-URL  /Macintosh  HD /Adobe  GoLive  4 /Quick  Start 

Test  Site /lndex.html 


“tls 


• Publish  I Always 
Label  | No  Label 
Type  I TEXT 


ID 


D 


Creator  GoMk 


Created  30.1 0.1 998,  1 5 :04  Uhr 
Modified  02.1 1 .1998,  16:51  Uhr 


2 You  can  make  several  Finder-related  settings: 

- Type  in  a new  file  name  in  the  Name  text  box,  if  desired.  For 
example,  if  your  Web  master  asks  you  to  use  another  name 
for  the  homepage,  you  can  use  this  text  box  to  overwrite  the 
default  index.html  file  name. 

- Choosea  Finder  label  from  the  Label  popup  menu.  In  theS/'fe 
Window,  the  page  will  assume  the  color  associated  with  the 
Finder  label. 

- Choose  an  option  from  the  Publish  popup  menu  to  specify  a 
condition  for  publishing  the  file  when  using  the  Export  Site. . . 
option  (see  Exporting  Your  Site  in  page  701).  You  have  the  fol- 
lowing options: 

- Never  excludes  the  file  from  publishing  altogether. 

- Always  publishes  the  file  unconditionally. 
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- If  referenced  publishes  the  file  only  if  the  file  is  referenced  by 
at  least  one  Web  page  within  the  site. 

- Check  the  Stationery  checkbox  if  you  want  to  reuse  the  file  as 
a template  for  other  pages. 

This  checkbox  is  selected  automatically  if  you  drag  a file  onto 
the  Extra  tab  in  the  right  pane  of  the  Site  Window.  (See  Man- 
aging Stationery  in  the  Site  Window  on  page  650  for  back- 
ground information.,) 

3 You  can  also  view  and  edit  file-related  information  from  the 

Finder: 

- The  Type  and  Creator  text  boxes  are  editable,  so  you  can  as- 
sign Adobe  GoLive  as  the  creator  of  a text  file  generated  by  a 
third-party  application.  For  example,  by  changingthecreator 
from  ttxt  to  GoMk,  you  can  make  Adobe  GoLive  the  owner  of 
a SimpleText  file. 

- Created  shows  the  date  and  time  when  the  current  file  was 
first  saved. 

- Modified  shows  the  date  and  time  when  the  current  file  was 
last  saved. 

- Size  shows  the  amount  of  disk  space  (in  kilobytes)  the  current 
file  occupies  on  your  hard  disk. 

To  preview  an  HTML  page,  proceed  as  follows: 

1 With  the  Web  page  still  selected,  click  the  Content  tab  of  the  File 

Inspector. 

2 A detailed  preview  of  the  HTML  page  appears  in  the  preview  pane 

of  the  Content  tab. 


Previewing  an  HTML  Page  in  the  File 
Inspector 

Clicking  the  Content  tab  displays  a preview  pane 
for  the  selected  HTML  page. 


_r 


The  preview  pane  shows  a full-page  preview  of 
the  inspected  HTML  page. 
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Imported  pages  often  can’t  be  previewed  as  expected.  If  this 
happens,  press  the  Option  key  and  choose  Create  Thumbnails 
(only  present  when  the  Option  key  is  pressed)  from  the  Site 
menu  to  have  Adobe  GoLive  add  a thumbnail  preview  to  all 
pages  in  the  active  Site  Window. 


Inspecting  Images  and  You  can  use  the  File  and  Content  tabs  of  the  File  Inspector  to  obtain 

Media  Files  detailed  information  about  a particular  image  or  media  file  and  to 

preview  its  content. 

Adobe  GoLive  comes  with  the  built-in  capability  to  display  and  play 
back  various  image  and  media  file  formats,  respectively,  without  the 
corresponding  plugin  being  present  in  the  Plugins  folder.  Native  sup- 
port is  provided  for  the  following  file  formats: 

• GIF  (staticand  animated),  JPEG  (including  Progressive  JPEG),  and 
PNG 

• QuickTime  VR  movies 

• 3DMF  graphics  (QuickDraw3D) 


QuickTime  movies  and  QuickDraw3D  graphics  display  with  typical 
playback  and  navigation  controls,  such  as  Play  buttons. 

To  view  basic  file  information  and  make  Finder-related  settings,  pro- 
ceed as  follows: 

1 With  the  image  or  media  file  selected  in  the  Site  Window,  click  the 
File  tab  of  the  File  Inspector. 


Inspecting  GIF  File  Properties  in  the  File 
Inspector 

Click  here  to  rename  your  file. 

This  text  field  shows  the  folder  path  to  the  file. 


Use  this  popup  menu  to  specify  a condition  for 
publishing  the  page. 

This  popup  menu  lets  you  choose  a Finder  label. 


These  text  fields  display  general  document 
information  supplied  by  the  Finder. 


File  Inspector 


| Page  f File  ^ Content  | 


Name  advertise.gif 


■ URL  /Macintosh  HD /Desktop  Folder  /In  the 

i Works  /Newsletter  Site  Folder  /image /advertise  .gif 


I I Stationery 


21 


2 


Creator  8BIM 


| SB  IN  | 


Created  1 8 .02 . 1 998 ~ 1 2 :35  Uhr 
Modified  1 8.02.1 998,  1 2 :35  Uhr 
Size  fl  2.973 


2 You  can  make  the  same  Finder-related  settings  as  for  HTML  pag- 
es, including  renaming,  setting  the  Publish  status,  and  choosing 
a Finder  label.  For  more  information,  please  refer  to  the  preced- 
ing section. 
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To  preview  an  image  or  a media  file,  proceed  as  follows: 

1 With  the  image  or  media  file  selected  in  theS/'fe  Window,  click  the 
Content  tab  rider  of  the  File  Inspector. 


The  Content  Tab  of  the  File  Inspector 


Clicking  the  Content  tab  displays  a preview  pane 
for  the  selected  file. 


The  content  of  the  image  or  media  file  will  be  dis- 
played here. 


_r 


2 A preview  of  the  image  or  media  file  will  appear  in  the  Content 
tab  of  the  File  Inspector. 


If  a media  file  cannot  be  previewed  as  expected,  the  appropri- 
ate multimedia  plugin  may  be  missing  in  the  Plugins  folder 
within  your  Adobe  GoLive  program  folder.  To  add  the  missing 
multimedia  extension,  Option-drag  the  plugin  file  from  the 
Plugins  folder  of  your  Web  browser  onto  the  Plugins  folder  in 
the  Adobe  GoLive  program  folder,  then  relaunch  Adobe  GoLive. 


The  following  illustration  shows  a QuickTime  movie  inspected  in  the 
Content  tab  of  the  File  Inspector. 


Previewing  a QuickTime  Movie  in  the  File 
Inspector 

Clicking  the  Content  tab  displays  a preview  pane 
for  the  selected  item. 


QuickTime  movies  display  with  typical  playback 
controls. 
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Drag  & Drop  Support  for  Previewed  Images 


Images  inspected  in  the  Content  tab  of  the  File  Inspector  can  be 
placed  directly  in  the  main  document  window  via  drag  & drop. 


Importing  an  Image  from  the  File 
Inspector 


Select  an  image  in  the  Site  Window  to  inspect  it, 
then  drag  it  from  the  Content  tab  of  the  File  In- 
spector into  the  main  document  window. 


To  import  a previewed  image  via  drag  & drop,  proceed  as  follows: 

Click  the  image  in  the  Content  tab  of  the  File  Inspector  and  drag 
it  into  the  main  document  window  (see  illustration  above). 


Renaming  Files  When  you  rename  a file  object  (Web  page,  image,  media  hie,  etc.) 

used  in  your  site,  Adobe  GoLive  will  also  rename  the  physical  hie  in 
the  Finder  and  let  you  update  all  references  to  that  hie  at  once  to  en- 
sure that  your  links  remain  intact. 


To  change  a hie  name,  proceed  as  follows: 

1 Select  an  item  from  the  file  list  of  the  Site  Window. 

2 Place  the  cursor  in  the  Name  text  box  of  the  File  Inspector. 


Renaming  Files 


The  Carriage  Return  symbol  prompts  you  to 
confirm  your  entry. 


3 Edit  the  name  as  desired.  When  you  start  editing,  a small  Carriage 
Return  symbol  appears  at  the  right  margin  of  the  text  box. 

4 Since  you  are  about  to  change  the  name  of  a file  that  is  refer- 
enced by  a Web  page  in  your  site,  a dialog  box  will  pop  up, 
prompting  you  to  confirm  that  you  want  to  have  Adobe  GoLive 
update  all  references. 

Alternatively,  clicking  the  filename  of  any  hie  in  the  Files  tab  of  the 
Site  Window  highlights  it  for  overtyping.  You  rename  the  hie  by  typ- 
ing a new  name  and  pressing  the  Return  key. 
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The  Rename  File  Dialog  Box 


Deselect  this  checkbox  if  you  want  to  exclude  a file 
from  updating. 

Any  files  that  need  to  be  updated  are  listed  here. 


5 This  dialog  box  will  ask  you  whether  you  want  to  update  all  files 
that  maintain  a hyperlink  to  or  reference  the  file  whose  name 
you  have  just  changed.  Click  Update  to  change  all  affected  links 
and  file  references  in  your  site. 


Please  note  that  by  exempting  files  from  being  updated,  you 
may  be  required  to  hand-repair  each  individual  link  affected 
by  the  new  file  name. 


Managing  Stationery  To  keep  the  layout  of  your  pages  consistent  when  designing  a site, 

in  the  Site  Window  Adobe  GoLive  lets  you  manage  stationery  at  the  site  level  using  one 

dedicated  tab  each  in  theS/Ye  Window  and  the  Palette.  You  can  create 
stationery  easily  via  d rag  & drop  by  importing  a page  from  the  Finder 
or  from  the  files  list  in  the  left  pane  of  the  Site  Window.  In  addition 
to  standard  stationery,  Adobe  GoLive  also  lets  you  manage  pages  and 
page  fragments  that  you  want  to  use  in  dynamic  components.  (See 
page  108  for  instructions  on  saving  pages  so  they  appear  in  the  Site 
Window.) 


The  Extra  Tab  in  the  Site  Window 


The  Extra  tab  in  the  right  pane  of  the  Site  Window 
lets  you  store  stationery  for  reuse  in  the  Site  View. 


□ 

Newsletter  Site 

-0B 

Files  ^ Site  ] Q 

External 

] Q Colors 

1 /{  Fontsets  j 

[^tl  1 Newsletter  Site  Folder 

*1 

i 

Cl  1 Stationeries  $ I 

- I 

Name  ^ | Status  1 

URL 

Name 

Status 

| URL 

> cs 

html 

/Macintosh  1 

_ 

Components 

✓ 

/Ma< 

±. 

> ifi 

image 

/Macintosh  1 

£ 

T empl_with_comp 

V 

/Ma< 

n 

index.html 

/Macintosh  1 

Si 

Site  Trash 

✓ 

/Mac 

/Ma< 

Stationeries 

'' 

Q Template 

✓ 

/Ma< 

Q Template  1 

✓ 

/Mac 

Q Template  2 

✓ 

/Ma< 

3 items 

i<i»»r— 

2 items 
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Click  the  icon  bar  to 
display  the  right 
pane  of  the  Site 
Window. 


Managing  URLs  and 
E-Mail  Addresses  in 
the  Site  Window 


To  create  stationery  within  the  Site  Window,  proceed  as  follows: 

1 Prepare  stationery  in  Layout  mode  and  save  it  to  disk  (preferably 
in  your  site  folder,  so  it  appears  in  the  Site  Window).  Locate  the 
page  you  want  to  use  as  stationery  in  the  Finder  or  in  the  left 
pane  of  the  files  list. 

2 If  the  Site  Window  is  in  single-pane  mode,  click  the  icon  bar  in  the 
upper  right  corner  of  the  Site  Window  to  display  the  right  pane, 
then  click  the  vertical  tab  rider  labeled  Extra. 

If  the  Site  Window  is  in  dual-pane  mode,  click  the  vertical  tab  rid- 
er labeled  Extra  in  the  right  pane  (if  not  already  open). 

3 Option-click  and  drag  the  file  onto  the  Extra  tab.  If  the  Extra  tab 
is  not  open,  drag  at  the  tab  rider  first,  wait  for  the  tab  to  open, 
then  drag  onto  the  main  window  area. 

4 Drop  the  file  in  the  Stationeries  folder. 

5 When  you  drop  the  file  in  the  Extra  tab,  Adobe  GoLive  will  auto- 
matically convert  the  file  to  stationery  and  copy  it  to  the  Statio- 
neries folder  within  the  “site.data”  folder,  which  is  at  the  same 
level  as  your  site  folder.  Also,  the  stationery  will  appear  in  the  Ex- 
tra tab  of  the  Palette. 

You  can  view  the  stationery  property  in  the  File  tab  of  the  File  In- 
spector or  by  using  the  Finder’s  Get  Info  command. 

6 The  stationery  is  ready  for  drag  & drop  insertion  now.  You  can 
use  stationery  in  two  ways: 

- You  can  design  a site  by  dropping  stationery  at  the  live  but- 
tons displayed  in  navigation  mode  (see  page  681). 

- You  can  drop  stationery  into  the  files  list  in  the  left  pane  of 
the  Site  Window  to  add  a new  page  with  basic  design  ele- 
ments. 


The  Reference  Inspector  lets  you  inspect  and  edit  the  names  and  con- 
tent of  non-file  objects  stored  or  newly  inserted  in  the  Site  Window. 
Non-file  objects  include  Universal  Resource  Locators  (URLs)  and  E- 
mail  addresses  stored  in  the  External  tab. 

The  External  tab  (see  page  611)  supports  mailto:  hyperlinks  with 
multiple  E-mail  addresses-for  example,  mailto:  oziv@adobe.com, 
jkranz@adobe.com.  Also,  Adobe  GoLive  automatically  adds  the 
„Mailto:“  prefix  to  a list  of  addresses  if  the  Auto-add  "Mailto:”  to  Ad- 
dresses option  in  the  Preferences  - General  - URL  Handling  dialog  box 
is  enabled. 
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The  Reference  Inspector 
Click  here  to  name  the  item. 

Type  in  the  URL  for  the  external  site  here. 


To  view  and  edit  the  name  and  content  of  a URL  or  E-mail  address, 
proceed  as  follows: 

1  Insert  a New  URL  or  New  Address  Item  (see  page  621)  from  theS/fe 
ta  b of  the  Palette  i nto  the  External  tab  of  the  Site  Window  or  select 
an  existing  item  from  the  External  tab. 

□ Reference  Inspector 

- Name  I airbaja  | 

- URL  | http : / / v w .airbaja .com  | 


r 


The  Change  URL  Dialog  Box 


Deselect  this  checkbox  if  you  want  to  exclude  a 
file  from  updating. 

Any  files  that  need  to  be  updated  are  listed  here. 


2 Place  the  cursor  in  the  Name  text  box  to  name  the  object. 

3 Edit  the  object  name  and  press  the  Return  key  to  confirm. 

4 Place  the  cursor  in  the  URL  text  box  to  change  the  resource  loca- 
tor or  address. 

5 Edit  the  URL  or  address  and  press  the  Return  key  to  confirm. 

6 A dialog  box  appears,  prompting  you  to  confirm  your  action. 

Change  URL 

Mrj  The  following  files  need  to  be  updated: 


| Cancel  | [j  OK  j| 


7  This  dialog  box  will  ask  whether  you  want  to  update  all  files  that 
contain  the  URL  or  E-mail  address  you  have  just  changed.  Click 
Update  to  change  all  affected  files  in  your  site. 
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Extracting  URLs  and  E-Mail  Addresses  from  Pages  In  Your  Site 


One  of  the  major  benefits  of  managing  a site  in  the  Site  Window  is 
that  it  keeps  everything  you  need  for  designing  pages  at  your  finger- 
tips. This  is  also  true  for  the  URLs  and  E-mail  addresses  used  in  your 
site.  The  Site  Window  provides  a convenient  shortcut  for  extracting 
those  non-file  objects  from  the  pages  listed  in  the  Files  tab. 

To  extract  URLs  and  E-mail  addresses,  proceed  as  follows: 

1 Click  the  External  tab  rider  in  the  Site  Window. 

2 Choose  the  Get  References  Used  command  from  the  Site  menu. 

3 Two  New  Addresses  and  New  URLs  folders  may  appear  in  the  Ex- 
ternal tab,  depending  on  whether  E-mail  addresses  and  URLs  are 
present  on  the  pages  in  your  site. 

4 Click  each  small  triangle  control  to  view  the  content  of  the  new 
folders.  You  will  find  that  each  folder  contains  a listing  of  URLs 
and  E-mail  addresses  used  in  your  site  (if  any). 


Tip:  You  can  also  accomplish  this  using  the  Clear  Site  feature  de- 
scribed in  the  section  Clearing  the  Site  Folder  on  page  641 . 


Finding  out  where  an  URL  or  E-Mail  Address  is  used 


The  Link  Inspector  lets  you  keep  track  of  where  the  URLs  and  E-mail 
addresses  listed  in  the  Site  Window’s  External  Tab  (see  page  61 1)  are 
actually  used.  The  screenshot  below  shows  an  example. 

To  find  out  on  which  page  or  pages  a particular  URL  or  E-mail  ad- 
dress is  used,  proceed  as  follows: 

1 Choose  the  desired  URL  or  E-mail  address  listed  in  the  External 
tab  of  the  Site  Window. 

2 Click  the  Open  Link  Inspector  button  (jELI  in  the  Site  Toolbar  to 
open  the  Link  Inspector  shown  below. 


Inspecting  URL  Usage  with  the  Link 
Inspector 


The  Link  Inspector  displays  the  pages  that  contain 
the  selected  URL  or  E-mail  address. 
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3 The  Link  Inspector  now  displays  the  page  (or  pages)  that  contain 
the  selected  URL  or  E-mail  address. 


Managing  Colors  in  The  Colors  tab  of  the  Site  Window  provides  comprehensive  bidirec- 
the  Site  Window  tional  drag  & drop  support  for  importing  and  assigning  colors.  It  al- 

lows the  user  to  collect  colors  for  future  use,  doing  away  with  the 
need  to  retrieve  frequently  used  colors  from  the  various  tabs  of  the 
Color  Palette.  Once  you  have  stored  a color  in  the  Colors  tab  of  the 
Site  Window,  it  is  available  for  instant  drag  & drop  coloring  of  select- 
ed text  in  a document  window — both  in  the  Site  Window  and  in  the 
Site  tab  of  the  Color  Palette. 


Importing  Colors 


You  can  import  colors  via  drag  & drop  from  the  preview  pane  of  the 
Color  Palette,  from  selected  text  in  the  main  document  window,  or, 
using  drag  & drop  or  copy  & paste,  from  another  Site  Window.  When- 
ever you  drop  a color  on  the  Colors  tab,  Adobe  GoLive  checks  whether 
it  is  Web  safe  (par  t of  the  spectrum  of  216  no-dither  colors  that  dis- 
plays evenly  on  all  platforms  and  operating  systems)  and  displays 
this  property  in  its  Web-Safe  column. 

The  illustration  below  shows  how  colors  are  imported  from  the  Color 
Palette. 


Importing  Lo  ors  into  the  Lo  ors 

Click  this  tab  rider  to  open  the  Colors  tab. 


Select  a color  in  the  Color  Palette,  then  drag  it 
from  the  preview  pane  onto  the  Colors  tab. 


To  add  a color  to  the  Colors  tab,  proceed  as  follows: 

1 Select  a color  from  any  tab  of  the  Color  Palette — for  example,  the 
Web  Safe  colors  tab  (see  example  above).  The  preview  pane  of  the 
Color  Palette  will  display  the  color. 

2 Drag  the  color  onto  the  Colors  tab  of  the  Site  Window.  When  you 
drop  the  color,  it  will  join  the  list  as  an  untitled  color.  A small  bul- 
let symbol  appears  in  the  Web  Safe  column  to  indicate  that  the 
color  is  Web  safe. 
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3 Type  in  a descriptive  name  in  the  context-sensitive  Inspector  win- 
dow, now  titled  Color  Inspector,  and  press  the  Return  key  to 
confirm  yourentry.  The  color  wi  1 1 be  renamed  accordingly  in  the 
color  list. 


The  Color  Inspector 


Use  this  text  box  to  name  or  rename  a color. 

Drag  a color  from  the  Color  Palette  on  the  color 
pane  to  add  a color  definition. 


Alternatively,  you  can  select  colored  text  in  the  main  document  win- 
dowand  drag  it  at  the  Colors  tab  to  add  colorstothe  list.  If  you  select 
text  with  multiple  color  assignments,  Adobe  GoLive  will  add  all  col- 
ors found  in  the  selection.  You  can  also  insert  a New  Color  object 
from  the  Palette  (see  page  621)  and  name  it  in  the  Color  Inspector, 
then  drag  a color  from  the  preview  pane  of  the  Color  Palette  onto  the 
color  field  in  the  Color  Inspector. 


Editing  Colors 


To  edit  a color  in  the  Colors  tab  of  the  Site  Window,  proceed  as  fol- 
lows: 

Drag  a new  selection  from  the  Color  Palette  at  the  color  field  of 
the  Color  Inspector  to  edit.  You  can  then  rename  the  color  in  the 
Color  Inspector,  if  you  want  to. 


Extracting  Colors  from  Pages  Within  Your  Site 


As  withE-mail  addresses  and  URLs,  you  can  also  extract  colors  as- 
signed to  objects  on  pages  in  your  site  and  list  them  in  the  Colors  tab 
of  the  Site  Window. 

To  extract  the  colors  used  in  your  site,  proceed  as  follows: 

1 Click  the  Colors  tab  rider  in  the  Site  Window. 

2 Choose  the  Get  Colors  Used  command  from  the  Site  menu. 

3 A New  Colors  folder  is  created  in  the  Colors  tab. 

4 Click  the  small  triangle  control  to  view  the  content  of  the  New 
Colors  folder.  You’ll  find  that  it  contains  a listing  of  “untitled  col- 
ors.” These  are  the  colors  that  your  site  uses. 
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Inspecting  Color  Usage  with  the  Link 
Inspector 


The  Link  Inspector  displays  the  pages  that  contain 
the  selected  color. 


Managing  Web  Sites  with  Adobe  GoLive 


5 If  desired,  click  any  color  and  name  it  in  the  Color  Inspector,  as 
outlined  above  in  the  section  Importing  Colors. 

Tip:  This  can  also  be  done  using  the  Clear  Site  feature  described 
in  the  section  Clearing  the  Site  Folder  on  page  641 . 

Exchanging  Colors  Between  Sites 

To  copy  colors  between  sites,  proceed  as  follows: 

1 Open  the  source  and  destination  site  documents. 

2 In  the  source  site,  select  one  or  more  colors  from  the  Colors  tab 
of  the  Site  Window. 

3 Drag  your  selection  at  the  Colors  tab  of  the  destination  site.  If  the 
tab  is  not  open,  drag  at  the  tab  rider  first,  wait  for  it  to  open,  then 
drag  onto  the  main  window  area. 

Assigning  Colors 

The  colors  you  collect  in  your  site  appear  in  two  places:  in  the  Colors 
tab  of  the  Site  Window  and  the  Site  tab  of  the  Color  Palette.  (See  the 
section  The  Site  Colors  Tab  in  Chapter  1 1 , The  Color  Palette.)  You  can 
use  d rag  & drop  to  assign  a color  from  either  location  to  selected  text 
in  the  document  window  or  to  a color  field  in  an  Inspector. 

Finding  out  where  Site  Colors  are  used 

The  Link  Inspector  lets  you  find  out  where  the  Colors  listed  in  the  Site 
Window’s  Colors  Tab  (see  page  612)  are  actually  used.  The  screenshot 
below  shows  an  example. 

To  inspect  the  Colors  used  in  your  site,  proceed  as  follows: 

1 Choose  the  desired  color  from  the  Colors  tab  of  the  Site  Window. 
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2 Click  the  Open  Link  Inspector  button  [IElI  in  the  Site  Toolbar  to 
open  the  Link  Inspector  shown  above. 

3 The  Link  Inspector  now  displays  the  pages  on  which  the  selected 
color  is  used. 


As  with  colors,  Adobe  GoLive’s  Site  Window  allows  you  to  collect  font- 
sets  for  later  reuse  in  the  pages  of  your  site. 

The  Fontsets  tab  (see  page  612)  stores  fontsets.  You  can  add  new  font- 
sets  either  by  dragging  in  fontset-formatted  text  from  the  main  doc- 
ument window  or,  also  via  drag  & drop,  from  another  Site  Window. 
After  you  store  a fontset  in  the  Fontsets  tab  of  the  Site  Window,  it  is 
available  for  instant  drag  & drop  assignment  to  selected  text  in  a doc- 
ument window. 

When  the  Site  Window  isopen,  the  font  sets  stored  in  the  Fontsets  tab 
(see  page  612)  also  appear  in  the  Style  menu.  To  format  selected  text, 
simply  choose  the  desired  font  set  from  the  font  set  list  that  appears 
at  the  end  of  the  Fonts  submenu. 

Please  note:  Fontsets  instruct  the  browser  to  use  custom  fonts 
for  building  the  page  display.  If  the  fonts  in  the  fontset  are  not 
installed,  the  browser  will  use  its  own  font  preferences.  For 
instructions  on  creating  fontsets,  please  refer  to  the  section 
Font  Sets  on  page  128  in  Chapter  4,  Building  Web  F’ages. 

To  add  a fontset  to  the  Fontsets  tab,  proceed  as  follows: 

1 In  the  main  document  window,  select  text  formatted  with  a font- 
set. 

2 Drag  the  text  onto  the  Fontsets  tab  of  the  Site  Window.  When  you 
drop  the  fontset,  it  joins  the  list  as  an  untitled  fontset. 

3 Type  a descriptive  name  in  the  context-sensitive  Inspector 
window,  now  titled  FontSet  Inspector,  and  press  the  Return  key 
to  confirm  your  entry.  The  fontset  will  be  renamed  in  the  font  set 
list. 
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The  Font  Set  Inspector 


Use  this  text  box  to  name  or  rename  a fontset. 


The  fonts  included  in  the  fontset  appear  in  the 
list  box. 


After  clicking  the  New  button,  choose  a font 
from  this  popup  menu. 

Items  displayed  in  this  text  box  can  be  deleted 
from  or  added  to  the  font  set. 

Use  these  buttons  to  delete  or  add  fonts. 


Alternatively,  you  can  also  insert  a New  Fontset  icon  from  theS/'fetab 
of  the  Palette  (see  page  621)  and  name  it  in  the  Font  Set  Inspector, 
then  add  fonts  as  described  above. 


Editing  Fontsets 


To  edit  a fontset  i n the  Fontsets  tab  of  the  Site  Window,  proceed  as  fol- 
lows: 

1 Select  a fontset  in  the  Fontsets  tab 

2 Click  the  New  button  in  the  Font  Set  Inspector. 

3 Select  a font  from  the  popup  menu  above  the  New  button.  Press 
the  Return  key  to  add  the  font  to  the  current  fontset. 


Extracting  Fontsets  from  Pages  Within  Your  Site 


As  with  external  references  and  colors,  you  can  also  extract  fontsets 
assigned  to  text  on  pages  listed  in  the  Files  tab  and  list  them  in  the 
Fontsets  tab  of  the  Site  Window. 

To  extract  the  fontsets  used  in  your  site,  proceed  as  follows: 

1 Click  the  Fontsets  tab  rider  in  the  Site  Window. 

2 Choose  the  Get  Fontsets  Used  command  from  the  Site  menu. 

3 A New  Fonts  folder  appears  in  the  Fontsets  tab. 

4 Click  the  small  triangle  control  to  view  the  content  of  the  New 
Fonts  folder. 
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It  contains  a listing  of  “untitled  fontsets,”  which  are  the  fontsets 
your  site  uses. 

5 If  desired,  click  any  fontset  and  name  it  in  the  Font  Set  Inspector, 
as  outlined  above  in  the  section 

Tip:  You  can  also  do  this  by  using  the  Clear  Site  feature  de- 
scribed in  the  section  Clearing  the  Site  Folder  on  page  641. 


Exchanging  Fontsets  Between  Sites 


To  copy  fontsets  between  sites,  proceed  as  follows: 

1 Open  the  source  and  destination  site  documents. 

2 In  the  source  site,  select  one  or  more  fontsets  from  the  Fontsets 
tab  of  the  Site  Window. 

3 Drag  your  selection  at  the  Fontsets  tab  of  the  destination  site.  If 
the  tab  is  not  open,  drag  at  the  tab  rider  first,  wait  for  it  to  open, 
then  drag  onto  the  main  window  area. 


Finding  out  where  Font  Sets  are  used 


The  Link  Inspector  lets  you  find  out  where  the  Fontsets  listed  in  the 
Site  Window’s  Fontsets  tab  are  actually  used.  The  screenshot  below 
shows  an  example. 

To  inspect  the  font  sets  used  in  your  site,  proceed  as  follows: 

1  Select  the  desired  font  set  from  the  Fontsets  tab  of  the  Site  Win- 
dow. 


Inspector 


The  Link  Inspector  displays  the  pages  the  selected 
font  sets  are  used  in. 


2 Click  the  Open  Link  Inspector  button  GEEI  in  the  Site  Toolbar  to 
open  the  Link  Inspector  shown  above. 

3 The  Link  Inspector  now  displays  the  pages  where  the  selected  font 
sets  are  used. 
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Using  Point  & Shoot  from  within  the 
Change  References  Dialog  Box 


Using  Point  & Shoot  changes  all  occurrences  of 
the  file  reference  in  your  site. 


Managing  Web  Sites  with  Adobe  GoLive 


The  Change  all  references...  button  in  theS/te  Toolbar  and  the  equiv- 
alent Change  References  command  in  the  Site  menu  supply  a very 
powerful  site  management  tool  that  lets  you  edit  a hyperlink  or  file 
reference  everywhere  throughout  your  site.  For  example,  you  can 
use  this  command  to  replace  a background  image  without  opening 
a single  page.  The  Change  all  references...  command  also  lets  you  re- 
place a page  that  is  the  target  of  multiple  hyperlinks  without  open- 
ing each  source  page  and  rearranging  the  link  via  Point  & Shoot. 

To  replace  a hyperlink  or  hie  reference  everywhere  in  your  site,  pro- 
ceed as  follows: 

1 In  the  Site  Window,  select  the  page,  image,  or  media  file  to  be  re- 
placed throughout  your  site. 

2 Click  the  Change  all  references  button  [fV>|  in  the  Site  Toolbar. 

3 The  Change  References  dialog  box  appears,  already  displaying  the 
name  of  the  file  to  be  replaced  in  the  Change  all  references  to  text 
box. 


Newsletter  Site 


CT\  Files  ] Site  Q External  ^ Q Colors  /f  Fontsets  | 


L-fc| [ NewsLetter  Site  Folder  ?~)|  ^ | 


Cl 

advertisa.gif 

AnimatedGIF 

"imuTTnl, 

E 

bottom2.jpg 

13 

bottom2LS.gif 

I2L 

greenberg.gif 

— - 

head5.gif 

Cl 

JPEG 

Change  References 


Change  all  references  to 

| f i le : / / /Mac  intosh9g20HD  /Desktop9520Fo  Ider  /rnd9S20  info9S20s  ite$520%| 

| Brovse...  ] 


into  references  to 


| /MacOS8  /Desktop%2QFolder  /Sites  /Newsletter^2QSite%20F  older  / imac| 


I Cancel  | |L 


4 Click  the  Point  & Shoot  button  below  the  into  references  to  text 
box,  and  drag  to  the  new  resource  you  want  to  replace  the  old 
one  with. 

5 Release  the  mouse  button.  The  interconnecting  line  flashes  twice 
to  indicate  that  Point  & Shoot  has  been  successful. 

6 A Change  Reference  dialog  box  appears,  prompting  you  to  con- 
firm that  you  want  Adobe  GoLive  to  update  all  hyperlinks  or  file 
references  affected  by  this  action.  If  desired,  deselect  the  check- 
box for  any  file  you  don’t  want  updated.  Click  OK. 

7 Adobe  GoLive  will  update  all  specified  hyperlinks  or  file  referenc- 
es now. 

8 Double-click  any  page  that  has  been  changed  to  view  the  effect. 
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You  can  also  change  hyperlinks  and  file  references  from  within 
the  Link  Inspector  window.  For  more  details,  please  see 
page  676. 


Toggling  Between  the 
Site  Window  and 
Document  Windows 


The  Switch  Windows  Button  and  Menu 
Click  this  button  to  return  to  the  Layout  view. 

Click  this  button  to  return  to  the  Site  Window. 

Click  the  small  triangle  control  to  pop  up  a list  of 
all  active  windows. 


While  inspecting  your  site,  you  can  use  a toggle  button  and  menu  in 
the  toolbar  to  switch  back  and  forth  between  a document  in  Layout 
view  and  the  Site  Window  (or  several  Site  Windows  open  at  the  same 
time). 

The  screenshots  below  show  the  location  of  the  window  toggle  but- 
ton and  the  windows  menu  in  the  toolbar. 


' I 1*  index.html 
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Part  23 — Viewing  the  Structure  of  a Site 

Part  23  explains  how  you  can  use  the  Site  View  tab  in  Adobe  GoLive’s 

Site  Window  to  view  the  structure  of  your  site,  outlining  its  multiple 

options  for  customizing,  filtering,  and  restructuring  the  display. 

There  are  six  major  subsections  in  Part  23: 

• The  section  Viewing  Your  Site  in  the  Site  View  Tab,  starting  on 
page  662,  describes  the  basic  viewing  functionality  built  into  the 
Site  View  tab  of  the  Site  Window. 

• The  Navigating  the  Site  View  section,  starting  on  page  663, 
explains  the  navigation  tools  incorporated  in  the  Site  View. 

• Zooming  In  and  Out  on  page  664  details  how  you  can  control  the 
zoom  factor  of  the  Site  View  to  see  other  levels  of  detail. 

• Collapsing  and  Expanding  the  Site  View,  starting  on  page  665, 
outlines  how  to  use  the  unique  collapse/expand  control  to  hide 
or  show  items  or  entire  hierarchy  levels. 

• The  section  Customizing  the  Site  View,  starting  on  page  666,  tells 
you  how  to  use  the  Site  View  Settings  window  to  control  what 
appears  in  the  Site  View  tab. 
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• Inspecting  Links  in  the  Site  View,  starting  on  page  671 , describes 
the  Link  Inspector  window,  which  lets  you  track  hyperlinks  and 
file  references  down  to  page  level. 


Viewing  Your  Site  in 
the  Site  View  Tab 


The  Site  tab  in  Adobe  GoLive’s  Site  Window  is  a powerful  graphical 
viewing  tool  that  lets  you  survey  the  structure  of  your  site  at  a glance. 

The  Site  View  tab  presents  an  overview  of  the  hierarchy  within  your 
site,  using  user-selectable  document  icons  and  a tree  metaphor  to 
demonstrate  how  the  links  branch  out  from  the  homepage  to  lower- 
level  pages.  Adobe  GoLive’s  hierarchical  site  view  is  based  on  a typi- 
cal parent,  child,  and  sibling  approach:  The  homepage  is  the  parent 
to  all  pages  on  the  next  lower  level,  which  are  in  turn  children  of  the 
homepage.  Pages  on  the  same  level  are  siblings  to  each  other. 


The  Site  View 


The  homepage  is  the  parent  page. 


Vertical  interconnecting  lines  represent  forward 
links. 


Referenced  pages  are  children  of  the  parent  page 
and  siblings  to  each  other. 

Horizontal  arrows  represent  backward  links  be- 
tween a child  and  a parent  or  horizontal  links  be- 
tween siblings. 

This  popup  menu  lets  you  zoom  in  and  out  of  the 
Site  View. 

The  title  or  file  name  of  the  selected  page  appears  - 
here. 


The  hierarchy  of  your  Web  site  is  represented  by  the  solitary  home- 
page  icon  at  the  top  and  several  rows  of  icons  below  it,  depending 
on  its  complexity. 

Numerous  controls  and  shortcuts  help  you  navigate  even  the  most 
complex  structures.  You  can  walk  through  the  hierarchy  using  key- 
board shortcuts,  zoom  in  and  out,  move  selected  pages,  and  scroll 
the  content  of  the  Site  View  using  the  Site  Navigator  wi ndow.  You  can 
also  customize  the  Site  View  to  your  viewing  preferences  using  a 
companion  Inspector  window. 


Switching  to  Link  Hierarchy  Mode 
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Beyond  its  viewing  functionality,  you  can  use  this  window  to  lay  out 
the  architecture  of  your  site  by  adding  new  generic  pages  and  links 
(see  Designing  a Site  Using  the  Site  View  on  page  678). 


Switching  to  Link 
Hierarchy  Mode 


If  you  have  worked  in  Navigation  Hierarchy  mode  before,  you  may 
have  to  click  the  Link  Hierarchy  button  LSD  on  the  Site  Toolbar  to  set 
the  Site  View  to  view-only  and  disable  the  site  design  mode.  (See 
Designing  a Site  Using  the  Site  View  on  page  678.) 


Cleaning  Up  the 
Site  View 


When  you  open  the  Site  View  for  the  first  time  after  creating  or  im- 
porting a site,  click  the  Arrange  button  GOD  on  the  Site  Toolbar  to  clean 
up  the  Site  View. 


Navigating  the 
Site  View 


Navigation  in  the  Site  View  is  greatly  eased  by  the  Site  Navigator  win- 
dow and  navigation  keys  described  here. 


The  Site  Navigator  The  Site  Navigator,  a companion  window  to  the  Site  Window,  is  avail- 

able at  your  fingertips  to  help  you  find  your  way  through  huge  sites 
with  hundreds  of  pages.  The  Site  Navigator  window  displays  a min- 
iaturized site  map.  You  navigate  by  dragging  a marquee  to  deter- 
mine the  portion  of  the  site  you  want  the  Site  View  to  display. 


The  Site  Navigator 

Drag  this  marquee  to  shift  the  focus  in  the  Site 
View. 


To  navigate  a site  using  the  Site  Navigator  window,  proceed  as  fol- 
lows: 

1 Click  the  Open  Site  Navigator  button  IS  in  the  Site  Toolbar. 

2 The  Site  Navigator  window  appears  on  top  of  the  Site  View. 

3 Locate  the  marquee  in  the  Site  Navigator  window  and  drag  it 
around. 
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4 As  you  drag,  the  focus  will  change  in  the  Site  Window,  showing 
other  sections  of  the  site.  Additionally,  two  item  counts  are  dis- 
played at  the  bottom  of  the  window.  The  first  one  indicates  the 
number  of  items  visible  in  the  Site  View.  The  second  indicates  the 
total  number  of  items  in  the  site,  both  visible  and  invisible. 


Navigation  Keys  Navigation  keys  let  you  walk  through  your  site  with  ultimate  ease. 

You  can  use  the  Up  and  Down  Arrow  keys  on  your  keyboard  to  jump 
between  hierarchy  levels  and  the  Left  and  Right  Arrow  keys  to  move 
sideways  between  pages  at  the  same  level. 


Zooming  In  and  Out  The  Site  View  features  a built-in  Zoom  menu  with  zoom  levels  rang- 
ing from  10  to  150  percent. 


The  Zoom  Menu 


Use  the  Zoom  menu  to  select  a zoom  factor  for  the 
Site  Window. 


Double-clicking  the  menu  tab  resets  the  zoom  fac- 
tor to  100  percent. 
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To  zoom  in  and  out  of  the  Site  View,  proceed  as  follows: 

1 Locate  the  Zoom  menu  at  the  lower  left  corner  of  the  Site  View. 

2 Choose  a zoom  factor  other  than  the  default  100  percent  to  view 
more  or  fewer  details  in  the  Site  View,  or  choose  Scale  to  Fit  to 
view  the  entire  site  at  a time. 

Alternatively,  you  can  also  Control-click  anywhere  in  the  Site  View 
and  drag  to  zoom  in  on  pages.  Pressing  Control-Alt  and  dragging 
zooms  back  out. 

3 To  return  to  the  default  100  percent  view,  double-click  the  menu 
tab  showing  the  current  zoom  factor. 


Collapsing  and  Expanding  the  Site  View 
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Collapsing  and 
Expanding  the  Site 
View 


Each  page  or  file  symbol  in  the  Site  View  has  a set  of  Hide  & Show  live 
buttons  that  let  you  clean  up  the  display  by  temporarily  hiding  a se- 
lected part  of  the  site  tree. 


Page  Symbol  with  Hide  & Show 
Live  Buttons 

The  “Up  arrow”  (or  “Down  arrow”)  indicates  that 
the  section  above  (or  below)  this  page  is  fully  ex- 
panded. 


Welco...tudio 


The  “Right  arrow”  indicates  that  the  section  below 
(or  above)  this  page  has  been  collapsed. 
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To  collapse  and  expand  branches  of  the  site  tree,  proceed  as  follows: 

1 Move  the  mouse  pointer  over  the  page  symbol  whose  child  or 
parent  pages  you  want  to  hide. 

2 “Up  arrow”  and  “Down  arrow”  live  buttons  appear  at  the  top  and 
bottom  of  the  symbol,  respectively. 

3 Click  the  live  button  on  top  of  the  symbol  to  hide  any  higher-level 
pages  or  the  one  at  the  bottom  to  hide  any  lower-level  pages. 

When  you  clickthe  live  buttons,  Adobe GoLive  hidesany  pagesabove 
or  below  the  current  page.  (Ifyou  hide  pages  above  the  current  page, 
it  collapses  anything  at  a higher  level  in  the  site  tree,  including  the 
homepage  and  any  further  levels  in  between.)  The  “Up  arrow”  or 
“Down  arrow”  turns  into  a “Right  arrow”  to  indicate  that  this  part  of 
the  site  tree  has  been  collapsed.  You  can  also  identify  a collapsed 
part  by  a stack  of  icons  that  appears  instead  of  the  default  page  sym- 
bol. 


Stacked  icons  in  the  Site  View 


Stacked  icons  indicatethatthe  site  tree  has  been 
collapsed. 


t> 
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4 Click  the  respective  “Right  arrow”  live  button  to  expand  higher  or 
lower  levels.  You  can  expand  the  site  tree  level  by  level  or  all  at 
once: 

- Click  the  “Right  arrow”  live  button  at  the  top  or  bottom  to  re- 
display only  the  page  directly  above  or  below  the  current 
page.  If  you  want  to  expand  the  entire  level  above  or  below 
the  current  page,  go  up  or  down  one  level  and  click  the  “Right 
arrow”  live  button  of  the  solitary  page  symbol.  (You  can  ex- 
pand one  level  at  a time  this  way.) 

- As  a shortcut,  you  can  alt-click  the  “Right  arrow”  live  button 
at  the  top  or  bottom  to  redisplay  the  entire  site  tree  above  or 
below  the  current  page. 


Customizing  the  Site 
View 


Thumbnail  Previewing  in  the  Site  View 


Once  saved  in  Layout  mode,  HTML  pages  display 
as  thumbnail  previews  in  the  Site  View  if  you 
choose  that  option  in  the  Site  View  Controller 
window. 


The  Site  View  provides  many  customization  options  that  let  you  tailor 
the  display  to  your  needs.  Options  include,  for  example,  the  appear- 
ance of  the  page  symbols,  various  display  colors,  and  the  way  sym- 
bols are  arranged.  You  can  customize  viewing  in  the  Site  View 
Settings  companion  window  to  the  Site  View  tab,  which  has  four  tabs 
with  different  options.  The  example  below  illustrates  the  effect  of  us- 
ing the  Thumbnails  option  from  the  Graphics  tab  of  the  Site  View  Set- 
tings window. 


Viewing  the  Structure  of  a Site 
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The  Site  view  Controller  Accompanying  the  Site  View  is  a context-sensitive  Inspector  window 

that  lets  you  adjust  many  display  options.  It  has  four  tabs: 

• The  options  in  the  Arrange  tab  let  you  adjust  the  viewing  mode 
for  the  Site  View  and  the  arrangement  of  the  page  symbols. 

• Theoptions  in  the  Filtertab  let  you  determine  what  theSite  View 
window  displays. 

• The  options  in  the  Display  tab  control  the  appearance  of  the 
page  symbols  and  links,  as  well  as  the  invisible  grid  used  to 
arrange  symbols. 

• The  options  in  the  Color  tab  allow  you  to  select  custom  colors  for 
the  items  that  the  Site  View  window  displays. 


Use  the  options  in  the  Arrange  tab  as  follows: 

1  Click  the  “eye”  button  * in  the  upper  right  corner  of  the  SiteView 
to  open  the  Site  View  Controller,  then  click  the  Arrange  tab  rider. 


This  option  is  only  used  in  Navigation  Hierar- 
chy mode. 


2 Leave  the  Link  Hierarchy  radio  button  selected.  This  option  con- 
trols the  mode  in  which  the  Site  View  window  displays  pages: 

- Navigation  Hierarchy  switches  to  Navigation  Hierarchy  mode. 
You  work  in  Navigation  Hierarchy  mode  while  designing  sites. 
Part  24  — Designing  a Site  discusses  this  mode. 

- Link  Hierarchy  switches  the  Site  View  to  the  Link  Hierarchy 
mode,  which  is  the  view-only  mode  you  will  use  now. 

3 Select  the  Auto  Arrange  Items  checkbox  to  letall  symbols  snap  to 
the  invisible  magnetic  grid.  Use  the  Horiz.  and  Vert,  text  boxes  in 
the  Display  tab  to  adjust  grid  spacing. 

4 Select  or  deselect  the  Stagger  Items  checkbox  to  arrange  items  us- 
ing either  a staggered  or  straight  grid. 


668 


CHAPTER  17 


Managing  Web  Sites  with  Adobe  GoLive 


5 Select  the  Use  “Hide  & Show”  Live  Button  checkbox  to  display  the 
“Up”  and  “Down”  arrow  live  buttons. 

6 Select  or  deselect  the  Show  Side-Knots  checkbox  to  toggle  the  for- 
ward and  backward  link  arrows  on  and  off. 

7 The  Use  “Create  New  Page”  Live  Buttons  and  Navigation  Hierarchy 
options  are  reserved  for  use  in  Navigation  Hierarchy  mode.  Part 
24  — Designing  a Site  describes  this  mode. 


Use  the  options  in  the  Filter  tab  as  follows: 

1 Click  the  “eye”  button  * in  the  upper  right  corner  of  the  SiteView 
to  open  the  Site  View  Controller  window,  then  click  the  Filter  tab 
rider. 


I he  hi  ter  lab  ot  the  Site  View 
Controller 


Use  these  options  to  determine  what  the  Site 
View  will  display. 


Use  these  options  to  determine  whether  a page 
or  file  needs  to  be  referenced  in  order  to  appear 
in  the  Site  View. 


2 Check  or  uncheck  any  of  the  options  in  the  Stow  Items  section  to 

determine  which  items  should  appear  in  the  Site  View: 

- Checking  HFML  Files  displays  all  Web  pages. 

- Checking  Media  Files  displays  all  images  and  media  files. 

- Checking  Folders  displays  folders. 

- Checking  Missing  Files  displays  any  missing  items,  as  listed  in 
the  Errors  tab  in  the  right  pane  of  the  Site  Window. 

- Checking  URLs  displays  any  hyperlinks  to  external  sites  placed 
within  any  page  throughout  your  site. 

- Checking  Addresses  displays  any  E-mail  addresses  placed 
within  any  page  throughout  your  site. 
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3 Check  or  uncheck  any  of  the  options  in  the  Reachable  from  Home- 
page  section  to  determine  whether  you  want  only  referenced 
items  to  appear  in  the  Site  View. 

- Click  Show  Item:  If  Reachable  to  display  any  item  that  can  be 
reached  via  hyperlinks — either  directly  from  the  homepage 
or  from  lower-level  pages. 

- Click  Show  Item:  If  Unreachable  to  show  all  items  in  the  Site 
View — regardless  of  whether  they  are  referenced  or  not. 

Use  the  options  in  the  Display  tab  as  follows: 

1  Click  the  “eye”  button  • in  the  upper  right  corner  of  the  SiteView 
to  open  the  Site  View  Controller  window. 


I he  Graphics  Tab  of  the  Site  View 
Controller 


Use  these  options  to  control  the  appearance  of 
the  page  symbols. 


Use  the  grid  options  to  customize  your  site  view. 


Use  these  buttons  to  toggle  link  shape. 

Use  these  radio  buttons  to  the  display  mode  of 
the  Site  View. 


{ 


Site  Viev  Controller 


Arrange  ) Filter 

{ Display  ] Color  ^ 

Shov  Items  as 

Item  Label 

O Icons 

O Page  Title 

(§)  Frames 
O Thumbnails 
Q TV  Screen 

® File  Name 

Grid  Spacing 

Frame  Size 

0 Horiz.  | 55 

Vidth  | 64  | 

0Vert.  1 140 

Height  1 43  | 

-Un*s  V | > fTl 

Display  £)  Site  Viev  Q Outline 

}Use  these  options  to  determine  what  text  in- 
formation is  used  to  identify  pages. 

}Use  these  text  boxes  to  resize  the  page 
symbols. 


2  Click  any  of  the  Show  Items  as  radio  buttons  to  select  the  appear- 
ance of  page  symbols.  Four  options  are  available: 


Q 

Frequent  Tr...er  Homepage 


J 


Frequent  Tr...er  Homepage 


Freq...epage 


Icons 


Frames  Thumbnails  TV  Screens 


3 Click  the  Page  Title  or  File  Name  radio  button  to  determine  how 
the  Site  Window  should  identify  pages. 

4 In  the  Grid  Spacinggroup  of  options,  enter  a value  in  pixels  in  the 
Horiz.  and  Vert,  text  boxes  to  resize  the  invisible  magnetic  grid 
that  determines  the  horizontal  and  vertical  spacing  between  the 
symbols  displayed  in  the  Site  View.  The  magnetic  grid  is  enabled 
by  the  Auto  Arrange  Items  checkbox  in  the  Arrange  tab  (see 
above). 
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5 Enter  a value  in  pixels  in  the  Frame  Size  Width  and  Fleight  text 
boxes  to  set  the  size  of  the  page  symbols  displayed  in  the  Site 
View.  The  size  you  specify  here  is  applied  to  symbols  displayed  as 
Frames,  Thumbnails,  or  TV  Screens. 

6 Click  any  link  shape  button  to  select  a link  shape: 

m Click  this  button  to  toggle  line  shape  to  curved. 

CD  Click  this  button  to  toggle  line  shape  to  skewed. 

rr  Click  this  button  to  toggle  line  shape  to  orthogonal 


7  The  Display  option  at  the  bottom  of  the  tab  toggles  the  display 
mode  between  the  default  Site  View  and  the  outline  appearance. 
The  Outline  mode  combines  the  customary  file  list  and  tree  met- 
aphors from  the  Files  and  Site  tabs  of  the  Site  Window  in  a struc- 
tured hierarchical  list  view.  An  example  of  the  Outline  display 
mode  is  shown  below. 


The  Site  View  in  Outline  Mode 


The  Outline  mode  displays  your  site’s  hierarchy  as 
a structured  file  list. 


The  Outline  view  is  available  both  for  the  Link  and  Navigation  Hi- 
erarchy modes  of  the  Site  View. 

Use  the  options  in  the  Color  tab  as  follows: 

1 Click  the  “eye”  button  «■  in  the  upper  right  corner  of  the  Site  View 
to  open  the  Site  View  Controller  window,  then  click  the  Color  tab 
rider. 

2 Click  any  of  the  color  fields  to  open  the  Color  Palette  and  assign 
custom  colors  to  the  background  of  the  Site  View  window,  to  links 
and  navigation  arrows,  to  tips  and  buttons  highlighted  by  user 
selection,  and  to  selected  items. 
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The  Color  Tab  of  the  Site  View  Controller 


Click  any  color  field  to  select  a custom  color  for 
the  objects  displayed  in  the  Site  View. 


Use  these  options  to  override  the  default  or  cus- 
tom color  for  pages  with  external  color  defini- 
tions. 


{ 

{ 


3 Use  any  option  from  the  Item  Color  section  to  override  the  de- 
fault or  custom  color  used  to  display  pages: 

- Click  the  Finder  Label  radio  button  to  let  each  page  symbol  as- 
sume the  color  of  the  label  assigned  to  the  physical  file  in  the 
Finder.  You  can  assign  finder  labels  in  the  File  Inspector  (see 
page  645). 

- Click  the  Status  Label  radio  button  to  let  each  page  symbol  as- 
sume the  custom  color  defined  for  its  page  status.  You  can  as- 
sign page  statuses  in  the  File  Inspector  (see  page  644)  and 
define  them  in  the  Site  - Page  Status  preferences  dialog  box 
(see  page  713). 

- Click  the  Monochrome  radio  button  and  choose  a color  in  the 
color  field  next  to  that  option  to  use  a custom  color  for  all 
page  symbols  that  appear  in  the  Site  View. 


Inspecting  Links  in 
the  Site  View 


The  Site  View  tab  uses  a set  of  arrows  and  graphical  symbols  to  dis- 
play physical  links  between  pages  in  your  site.  The  ends  and  tips  of 
the  links  are  clickable,  allowing  you  to  pinpoint  the  sources  and  des- 
tinations of  hyperlinks  with  ultimate  ease. 
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How  Links  Are  Displayed 
in  the  Site  View 

A Forward  Link 

Forward  links  appear  as  vertical  arrows. 

The  arrow  tip  of  a forward  link  is  also  selectable. 


Inspecting  Links  in  the 
Link  Inspector 

0 
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There  are  two  types  of  links  in  the  Site  View: 


• A forward  link  is  a vertical  link  between  a parent  and  a child. 
Forward  links  are  displayed  as  vertical  arrows,  with  a bullet  at 
the  bottom  of  the  source  page  and  an  arrow  tip  pointing  at  the 
top  of  the  destination  page. 


The  origin  of  a forward  link  is  selectable. 


• A backward  link,  also  referred  to  as  a side-knot,  is  a horizontal 
or  vertical  link  between  siblings  or  between  a child  and  a par- 
ent. 

Two  different  symbols  display  a backward  link: 


The  Incoming  Link  symbol  indicatesa  referenced  page,  that 
is,  a page  used  as  the  destination  of  a link. 


The  Outgoing  Link  symbol  indicates  a referencing  page, 
that  is,  the  page  that  contains  the  source  of  a link. 


Inspecting  Forward  Links 

To  inspect  a forward  link,  proceed  as  follows: 

1 If  you  have  zoomed  out  of  the  Site  View,  return  the  zoom  factor 
to  more  than  50%  or  higher. 

2 Move  the  mouse  over  the  arrow  tip  at  the  top  or  the  bullet  at  the 
bottom  of  a page  icon.  This  will  highlight  the  origin  or  destina- 
tion of  the  link,  changing  its  color  to  yellow  (unless  you  have  se- 
lected another  color  in  the  Color  tab  of  the  Site  View  Controller, 
as  in  the  preceding  section). 

3 Click  to  open  the  Link  Inspector,  which  shows  all  pages,  images, 
and  media  files  referenced  by  this  page,  plus  other  pages  that 
reference  the  page  itself. 
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Inspecting  the  Homepage  in  the 
Link  Inspector 


□ ::::::::::::  .. 

N 
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nr  m iron 

© PI  bckgrndl  .gif 
Q bottom.jpg 
0 Q bottom2LS.gif 
^ idi  msthd2.gif 

•V 

<1 

u 

The  example  above  shows  the  Link  Inspector  after  you  click  the  bullet 
at  the  bottom  of  the  index.html  homepage. 


Inspecting  Backward  Links 


Inspecting  Links  in  the  Link  Inspector 


To  view  the  source  and  destination  of  a backward  link,  proceed  as 
follows: 

1 Move  the  mouse  over  the  Incoming  Link  symbol  to  the  left  of  a 
page  to  highlight  the  corresponding  outgoing  link(s)  of  the  source 
page(s). 

Move  the  mouse  over  the  Outgoing  Link  symbol  to  the  right  of  a 
page  to  highlight  the  corresponding  incoming  link(s)  of  the  des- 
tination page(s). 

2 Click  either  link  symbol  to  display  the  Link  Inspector  for  that 
page. 

□ Link  Inspector B 


index.html 

<1 


SubscriptionForm  .html 


I®)  ["^1  bckgrnd1a.gif 

!'■ 


The  example  above  shows  the  Link  Inspector  after  clicking  the  outgo- 
ing link  symbol  to  the  right  of  a child  page  of  the  homepage. 
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Viewing  a Resource  in  the  Link 
Inspector 


Six  Web  pages  reference  this  image  file. 


Managing  Web  Sites  with  Adobe  GoLive 


Walking  Through  the  Link  View 

The  Link  Inspector  window  allows  you  to  walk  through  your  site  by 
clicking  pages  and  resource  icons  successively — starting  at  the  page 
whose  linkarrowyou  have  clicked  initially  in  tbeSite  Viewand  work- 
ing your  way  through  all  levels  of  the  hierarchy. 

To  walk  through  the  Link  Inspector  window  and  view  the  pages  and 
the  resources  they  use,  proceed  as  follows: 

1 Click  the  icon  of  the  page  or  resource  you  wish  to  inspect. 

2 Adobe  GoLive  updates  the  display  in  the  Link  Inspector  window. 
The  page  or  resource  you  choose  becomes  the  current  selection, 
which  the  large  icon  indicates. 


3  Click  other  icons  to  view  more  pages  and  resources.  The  example 
above  illustrates  how  you  can  view  the  pages  that  reference  a 
particular  media  file. 


Inspecting  Links  in  the  Site  View 
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Customizing  the  Link  Inspector 


Accompanying  the  Link  Inspector  is  a control  ler  wi ndow  that  lets  you 
select  what  is  displayed  when  you  click  any  link  to  open  the  Link  In- 
spector. 


The  Link  View  Controller 


□ Link  Viev  Controller g 

Shov 


Click  here  to  hide  or  show  forward  links. 
Click  here  to  hide  or  show  backward  links. 


■0 Links  to  file 
-0 Links  from  file 


Use  these  options  to  show  or  hide  entire  classes 
of  objects. 


0HTML  files 
0 Media  files 
0 Missing  files 
[0  URLs 
0 Addresses 


Click  here  to  toggle  the  thumbnail  display  in  the 
Link  Inspector  on  and  off. 


FI  Icon  instead  of  thumbnail 
0 URL  at  bottom 


r 


Viewing  Referenced  Pages  in  the 
Link  View 


To  show  or  hide  a class  of  objects,  proceed  as  follows: 

1 Click  the  “eye”  button  * in  the  upper  right  corner  of  the  Link  In- 
spector window  to  open  the  Link  View  Controller. 

2 Uncheck  the  appropriate  checkbox  to  hide  that  item. 

3 Check  the  appropriate  checkbox  to  show  that  item. 

4 Check  the  Icon  instead  of  thumbnail  checkbox  to  turn  thumbnail 
previewing  off. 

The  following  example  shows  the  Link  Inspector  with  HTML  files  only 
and  thumbnail  previewing  enabled. 
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Editing  Hyperlinks  and  File  References  Using  the  Link  Inspector 


Beyond  its  mere  link  inspection  capabilities,  the  Link  Inspector  allows 
you  to  use  Point  & Shoot  to  update  all  hyperlinks  and  references 
pointing  to  a particular  Web  page  or  resource  file.  This  feature  is  par- 
ticularly useful  if  you  need  to  exchange  repetitive  design  elements  in 
all  pages  throughout  your  site  or  a Web  page  that  many  other  pages 
reference. 


Exchanging  a Background  Image  from 
within  the  Link  Inspector 


Click  the  item  you  want  to  replace  in  the  Link  In- 
spector, then  Point  & Shoot  at  the  new  file  item. 


The  example  above  shows  how  you  can  exchange  a background  im- 
age “across  the  board.” 


This  is  a very  powerful  feature,  so  use  it  with  extreme  care.  Al- 
though editing  references  to  pages  shouldn’t  pose  major  prob- 
lems (you  only  redirect  a hyperlink),  exchanging  images  or 
other  media  items  is  far  more  critical.  When  you  do  so,  make 
sure  that  the  new  image  or  media  item  has  exactly  the  same 
size  and  width-to-height  proportions  as  the  one  you  want  to  re- 
place, or  else  it  may  come  out  distorted. 


To  edit  hyperlinks  and  file  references  from  within  the  Link  Inspector 
window,  proceed  as  follows: 

1 Locate  the  page,  image,  or  media  file  you  want  to  replace  within 
your  site  and  select  it. 

2 Click  the  Point  & Shoot  icon  next  to  the  file  icon  \r\  the  Link  Inspec- 
tor window. 

3 Drag  to  the  new  item  in  the  left  pane  of  the  Files  tab. 

If  the  Files  tab  is  not  open — for  example  because  you  have  been 
working  in  the  Site  View  before  opening  the  Link  Inspector — drag 
to  its  tab  rider,  wait  for  the  Files  tab  to  open,  then  drag  onto  the 
new  file. 

4 The  interconnecting  line  blinks  twice  to  indicate  that  Point  & 
Shoot  has  been  successful. 
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5 A Change  Reference  dialog  box  appears,  prompting  you  to  con- 
firm that  you  want  Adobe  GoLive  to  update  all  hyperlinks  or  file 
references  affected  by  this  action.  If  there  are  any  files  you  don’t 
want  updated,  deselect  the  checkbox.  Click  OK. 

6 Adobe  GoLive  will  update  all  specified  hyperlinks  or  file  referenc- 
es now. 

7 In  the  Link  Inspector,  the  replaced  file  now  appears  as  a solitary 
icon,  with  all  its  links  removed. 


You  can  also  change  hyperlinks  and  file  references  directly  in 
the  Site  Window  using  the  Change  all  references...  button  in  the 
Site  Toolbar  or  the  Change  References  command  from  the  Site 
menu.  For  more  details,  please  refer  to  page  660. 


Part  24 — Designing  a Site 

Part  24  tells  you  how  to  use  the  Site  View  tab  in  Adobe  GoLive’s  Site 

Window  to  visually  design  a new  site.  It  is  subdivided  in  three  sec- 
tions: 

• The  section  Designing  a Site  Using  the  Site  View,  starting  on 
page  678,  introduces  you  to  Adobe  GoLive’s  advanced  site  design 
tools. 

• Switching  to  Navigation  Mode,  starting  on  page  679,  acquaints 
you  with  Adobe  GoLive’s  Navigation  Hierarchy  mode,  a unique 
HTML  4.0-based  feature  that  allows  for  the  display  of  a site’s 
structure  by  navigational  relationships  between  pages. 

• The  section  Adding  New  Pages  in  the  Site  View,  starting  on 
page  680,  outlines  how  to  build  the  “blueprint”  of  a site  using 
the  Site  View  tab  of  the  Site  Window. 

• The  section  Turning  Navigational  Links  into  Hyperlinks,  starting 
on  page  683,  finally  explains  how  you  create  the  physical  links 
that  the  “blueprint”  of  your  site  requires. 
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Designing  a Site  Using  Adobe  GoLive’s  Site  tab  is  a fully  featured  site  designer,  providing  a 
the  Site  View  convenient  way  of  designing  the  architecture  of  your  site  before  add- 

ing content  to  your  pages.  After  creating  a new  site  document,  you 
can  switch  to  the  Site  View  immediately  and  design  your  site  by  cre- 
ating a hierarchy  of  empty  pages. 

The  pages  you  add  serve  as  placeholders;  they  will  be  held  in  a New 
Files  folder  within  your  site  folder.  When  finished  with  your  site  de- 
sign, you  can  start  filling  the  new  pages  with  content  and  create 
physical  links.  The  following  screenshot  illustrates  the  process  of  de- 
signing a site. 


Designing  a Site  in  the  Site  View 


Starting  with  a solitary  homepage. . . 


...  you  can  add  the  first  level  of  child  pages  by  clicking  the  Create 
New  Page  live  buttons,  or  you  can  drag  templates  from  the  Site  Win- 
dow onto  the  Create  New  Page  live  buttons. 


You  can  then  add  further  levels  by  clicking  the  Create  New  Page  live  buttons  of  the 
child  pages  created  from  the  homepage. 


Switching  to  Navigation  Mode 
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Adobe  GoLive  uses  a meta  plan  approach  to  site  design  that  lets  you 
create  a structured  working  model  of  empty  pages.  The  result  is  a 
“blueprint”  design  that  will  guide  you  through  your  site  building 
project.  When  designing  a site  in  the  Site  View  tab  of  the  Site  Window, 
you’ll  find  that  Adobe  GoLive  automatically  imposes  a structure 
based  on  your  decisions:  You  can  create  either  a child  page  or  a sib- 
ling of  a page.  If  you  create  a child  page,  the  new  page  appears  at  a 
lower  level  in  the  hierarchy.  If  you  create  a sibling,  the  new  page  ap- 
pears on  the  same  level. 


Switching  to 
Navigation  Mode 


To  make  all  site  design  tools  available,  you  must  switch  the  Site  View 
from  its  Link  Hierarchy  default  mode  to  Navigation  Hierarchy  mode. 
To  switch  to  the  Navigation  Hierarchy  mode,  click  a button  on  the 
Toolbar  or  in  the  Site  View  Controller  window.  It  enables  the  Live  But- 
tons that  appear  at  the  top,  bottom,  left,  and  right  edges  when  you 
move  the  mouse  pointer  over  a page  symbol. 

To  switch  to  Navigation  Hierarchy  mode,  proceed  as  follows: 

If  you  have  been  viewing  your  site  in  Link  Hierarchy  mode,  click 
the  Navigation  Hierarchy  button  31  on  theS/'fe  Toolbar  to  enable 
the  site  design  mode. 

Alternatively,  you  can  useth  eSite  View  Controller  to  switch  modes,  as 
described  next. 

1 Click  the  “eye”  button  * in  the  upper  right  corner  of  the  SiteView 
to  open  theSite  View  Controller  window,  then  click  the  Arrange 
tab  rider. 


Enabling  Navigation  Hierarchy  Mode  in 
the  Site  View  Controller  Window 

Clickthis  option  to  switch  to  Navigation  Hierarchy 
mode. 


Select  these  checkboxes  to  have  live  buttons  dis- 
played when  you  move  the  mouse  pointer  over  a 
page  symbol. 


Use  this  option  to  create  navigational  links  if  you 
have  a site  with  links  already  in  place. 

Click  this  button  to  create  a table  of  contents. 


2 Select  the  Navigation  Hierarchy  radio  button  to  switch  the  Site 
View  to  Navigation  Hierarchy  mode. 
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Adding  New  Pages  in 
the  Site  View 


3 


3 Select  the  Use  “Create  New  Page”  Live  Button  checkbox  to  enable 
the  live  buttons  with  the  small  page  symbol  that  create  a new 
page  when  clicked. 

4 Select  the  Use  “Hide  & Show”  Live  Button  checkbox  to  display  the 
“Up  arrow”  and  “Down  arrow”  live  buttons  if  you  want  to  be  able 
to  collapse  parts  of  the  site  tree  while  designing. 

5 Select  the  Show  Side-Knots  checkbox  to  toggle  the  forward  and 
backward  link  arrows  on  and  off. 

6 If  you  have  a site  with  existing  pages  and  hyperlinks  already  in 
place,  click  the  New  from  Links  button.  This  button  will  overlay 
the  arrows  representing  physical  links  with  a navigational  hierar- 
chy and  allow  you  to  add  new  pages  in  the  Site  View.  If  you  are 
not  satisfied  with  your  design,  this  button  will  also  reset  the  Site 
View  and  remove  all  new  pages  and  navigational  links. 

7 Click  the  Create  T.o.C.  Page  button  to  have  Adobe  GoLive  generate 
a table  of  contents  with  clickable  links  from  the  titles  of  the  pages 
in  your  site.  This  page  may  come  in  handy  as  a navigation  aid 
when  you  start  working  on  page  content. 


You  can  use  new  pages  or  stationery  to  design  the  architecture  of 
your  site  from  scratch  or  add  them  to  an  existing  site  to  see  how  extra 
pages  would  fit  in. 

To  add  a new  empty  page  or  stationery  in  the  Site  View,  proceed  as 
follows: 

1 Make  sure  that  you  are  in  Navigation  Hierarchy  mode  and  that 
the  live  buttons  have  been  enabled  in  the  Site  View  Controller 
window  (see  preceding  section). 

2 If  you  design  a site  from  scratch,  you  will  start  with  th elndex.html 
page.  At  this  time,  only  the  default  homepage  appears  in  the  Site 
View.  If  you  want  to  add  more  pages  to  an  existing  site,  locate  the 
page  you  want  to  start  with. 

3 Move  the  mouse  pointer  over  the  start  page.  A small  Create  New 
Page  live  button  fades  in  slowly  to  the  left,  right  or  at  the  top  or 
bottom  of  the  page  symbol,  depending  on  where  you  move  the 
mouse  cursor.  The  symbol  fades  out  when  you  move  the  cursor 
in  any  other  direction  or  away  from  the  page  symbol.  The  follow- 
ing screenshot  shows  these  Create  New  Page  live  buttons. 
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Adding  a New  Child  Page  to  the  Site  View 


Move  the  mouse  cursor  over  the  page  you  want 
to  add  a child  page  to,  then  click  the  Create  New 
Page  live  button. 

The  Pending  indicator  identifies  an  empty  page 
that  has  no  connection  to  the  rest  of  the  site. 


index.html 


A ? 


A new  page  symbol  is  created.  The  live  buttons 
appears  again  to  let  you  carry  on  with  your  site 
design. 


a 


untit....  html 

A 


4 Move  the  cursor  in  the  desired  direction  and  click  the  Create  New 
Page  live  button  to  insert  a new  page. 

- The  top  live  button  inserts  a new  parent  page  (and  a new 
hierarchy  level)  above  the  current  page.  This  button  is  not 
available  for  the  homepage,  which  can’t  have  a parent  page. 

- The  bottom  live  button  inserts  a new  child  page  below  the 
current  page. 

- The  left  live  button  insertsa  new  sibling  page  to  the  left  of  the 
current  page.  This  live  button  is  not  available  for  the 
homepage,  which  can’t  have  any  sibling  pages. 

- The  right  live  button  insertsa  new  sibling  page  to  the  right  of 
the  current  page.  This  live  button  is  not  available  for  the 
homepage,  which  can’t  have  any  sibling  pages. 

5 A new  page  is  identified  by  a yellow  pending  indicator  in  the  low- 
er right  corner  of  its  symbol.  This  indicator  will  not  disappear  be- 
fore you  create  physical  hyperlinks  (see  the  section  Turning 
Navigational  Links  into  Hyperlinks  on  page  683). 

Alternatively,  you  can  create  new  pages  by  inserting  a copy  of  a tem- 
plate page  stored  in  the  Extra  tab  of  the  Palette  (see  page  650  for  in- 
structions on  adding  stationery  to  your  site): 

- Go  to  the  Palette  and  open  the  Extra  tab. 


The  Extra  Tab  of  the  Palette 


Any  stationery  you  add  to  the  Extra  tab  of  the  Site 
Window  appears  in  the  Extra  tab  of  the  Palette. 


1 


□ Palette  □ 

□ 1 B]  0)  El  a [01  B] 

QDLQ 

Template  1 | , Stationeries  ▼ 

Select  Stationeries  from  this  popup  menu. 
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- Select  Stationeries  from  the  view  control  menu  at  the  bottom 
of  the  Palette.  (You  can’t  use  components  to  design  a site.) 
Locate  the  desired  stationery  and  drag  it  to  the  page  to  which 
you  want  to  add  a child,  sibling,  or  parent. 

Drag  the  stationery  at  the  appropriate  live  button  and  drop  it 
there  to  have  Adobe  GoLive  add  a new  page  with  basic  design 
elements. 

- A dialog  box  appears,  prompting  you  to  confirm  that  you 
want  Adobe  GoLive  to  update  the  file  references  in  the  copy 
of  the  template  page.  (This  is  necessary  if  the  template  refer- 
ences other  pages  or  contains  images.)  Click  OK. 

- You  have  now  added  a copy  of  a template  to  your  site. 

From  now  on,  any  child,  sibling,  or  parent  you  create  from 
the  new  page  using  its  live  buttons  will  be  an  exact  copy  of 
the  template. 

6 Adobe  GoLive  adds  the  new  pages  you  create  to  the  New  Files 
folder  in  the  Files  tab  of  the  Site  Window  and  automatically  cre- 
ates navigational  links  between  any  parent  page  and  its  new 
child  pages. 

By  default,  Adobe  GoLive  names  new  pages  you  create  in  the  Site 
View  in  the  order  of  appearance,  that  is,  the  first  page  is  named 
“untitledPage1.html”,  the  second  “untitledPage1.html”,  the  third 
“untitledPage13.html”,  and  so  on. 

7 Name  the  new  pages  now  to  make  them  easier  to  identify  later 
on.  Depending  on  the  text  display  option  set  in  the  Site  View  Con- 
troller window  (see  page  669),  you  can  either  edit  the  file  names 
or  page  titles,  or  temporarily  change  the  text  display  option  in 
the  Site  View  Controller  and  edit  both. 

8 Switch  to  the  Files  tab,  then  locate  and  open  the  New  Files  folder. 
You  will  find  the  new  pages  with  the  file  names  you  have  just  en- 
tered in  step  7 above.  If  you  have  edited  the  page  titles,  select 
each  page  to  have  the  title  displayed  in  the  Reference  Inspector 
before  changing  the  file  name.  (You  can  also  double-click  each 
page  to  view  the  title.) 
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Turning  Navigational  Because  there  are  no  physical  links  between  the  pages  in  place  at 

Links  into  Hyperlinks  this  time,  open  the  homepage  nowand  create  hyperlinksto  the  new- 

‘ ly  created  pages.  Each  new  page  “knows”  about  the  navigational 

links  that  Adobe  GoLive  creates  as  you  add  pages  to  the  new  site.  The 
links  that  result  from  the  site  design  form  a “to  do”  list  that  appears 
in  the  Pending  tab  of  the  Page  Inspector. 


The  Pending  Tab  of  the  Page  Inspector 


The  Pending  tab  lists  the  links  you  will  have  to  ere 
ate  to  match  the  site  design. 


The  pending  indicator  is  removed  from  the  list 
when  you  create  a physical  link. 


To  turn  navigational  links  into  physical  hyperlinks,  proceed  as  fol- 
lows: 

1 Double-click  the  index.html  homepage  icon  in  the  Site  View. 

2 When  Adobe  GoLive  has  opened  the  page,  click  the  small  page 
icon  above  the  main  window  area  to  display  the  Page  Inspector 
in  the  Inspector  window. 

3 Click  the  Pendinglab  to  view  the  list  of  pending  links. 

4 Add  text  or  an  image  to  link  from,  then  Point  & Shoot  at  the  de- 
sired file  in  the  Site  View. 

5 The  blue  pending  indicator  arrow  disappears  for  the  page  you 
have  just  linked  to. 

6 Repeat  for  the  remaining  destination  pages  until  no  pending 
links  remain. 

7 Go  to  other  new  pages  and  repeat  steps  1 through  6 above. 

8 When  you  finish  creating  hyperlinks,  move  the  new  pages  out  of 
the  New  Files  folder  or  rename  the  folder,  for  example,  to  html. 
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Part  25 — Site 


Maintaining 
Site  Integrity 


Error  Indicators 


Maintenance 

Part  25  describes  how  Adobe  GoLive  assists  you  in  troubleshooting 

broken  hyperlinks  and  lost  file  references  throughout  your  site.  It  is 

subdivided  in  six  sections: 

• The  section  Maintaining  Site  Integrity  on  page  684  addresses 
general  topics  associated  with  maintaining  hyperlinks  and  file 
references  in  a Web  site. 

• Error  Indicators,  starting  on  page  684,  explains  the  visual  error 
indicators  that  may  appear  in  Adobe  GoLive’sS/'fe  Window. 

• Common  Sources  for  Errors  page  686  briefly  discusses  common 
mistakes. 

• Analyzing  Missing  File  Problems,  starting  on  page  686,  explains 
how  to  find  out  what  has  happened  when  Missing  Files  errors 
are  reported. 

• Analyzing  Error  Messages  Caused  by  External  References,  sta rti ng 
on  page  687,  tells  you  how  to  solve  problems  caused  by 
improper  link  parsing  preferences  or  faulty  URLs  pointing  at 
external  sites. 

• The  section  Repairing  Broken  Links  and  Invalid  File  References, 
starting  on  page  687,  outlines  Adobe  GoLive’s  hyperlink  repair 
tools  and  the  solutions  they  provide. 


Adobe  GoLive  continuously  monitors  the  integrity  of  your  site  and 
alerts  you  to  broken  links,  lost  resources,  or  other  errors  that  may  be 
caused,  for  example,  by  moving  files  in  the  Macintosh  Finder  or  im- 
porting an  existing  site  that  has  its  resources  scattered  over  multiple 
folders. 

When  errors  occur,  you  can  open  a dedicated  tab  in  the  Site  Window 
that  assists  you  in  tracking  down  the  problem.  In  many  cases,  you 
can  troubleshoot  problems  by  opening  the  Link  Inspector  window 
and  restoring  linksand  file  references  via  Point  & Shoot.  Sometimes, 
you’ll  have  to  open  the  affected  pageand  use  Point&Shoot  from  the 
source  of  the  link  or  file  reference. 


Iconized  indicators  appearing  at  the  top  of  the  Site  Window  give  the 
first  visual  hint  of  errors. 
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Status  Indicators  in  the  Site  Window 


There  is  at  least  one  page  or  resource  with  errors  - 
in  this  site. 


This  file  is  OK. 


This  file  contains  errors,  such  as  broken  links. 
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Error  indicators  in  the  Status  column  of  the  Files  tab  supply  more 
hints,  and  a more  detailed  description  appears  in  the  vertical  Errors 
tab  in  the  right  pane  of  the  Site  Window  (see  example  above). 

Adobe  GoLive  displays  various  icons  in  the  Status  column  in  the  left 
pane  and  in  the  Errors  tab  in  the  right  pane  of  the  Site  Window  to 
help  you  identify  the  nature  of  an  error: 

The  checkmark  symbol  indicates  that  the  file  is  error-free,  which  means  that  all  referenced 
files  have  been  found. 


The  “bug”  symbol  indicates  that  there  are  errors  in  a Web  page — for  example,  broken  links 
to  other  resources  or  files. 


The  “stop”  symbol  indicates  that  the  object  has  lost  its  connection  with  the  physical  file. 


The  question  mark  icon  indicates  that  the  physical  file  couldn’t  be  found. 


✓ 

* 

o 

0 


If  you  see  checkmarks  only  throughout  the  Site  Window,  your  site  is 
ready  for  use  now.  You  can  skip  the  following  sections. 

If  you  do  see  an  error  indicator,  the  following  sections  explain  how 
to  handle  errors  using  Adobe  GoLive’s  various  troubleshooting  tools. 

Error  indicators  also  appear  in  the  Site  View.  If  a page  contains  faulty 
links  or  file  references,  a “bug”  shows  on  the  page  icon  to  alert  the 
user  to  potential  problems. 

A Page  with  an  Error  Indicator  in  Site  View 


The  “bug“symbol  indicates  that  there  is  a problem 
with  the  links  or  file  references  in  a page. 
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Common  Sources  for  If  you  stick  to  managing  your  site  in  Adobe  GoLive,  errors  will  rarely 

Errors  ever  occur.  Elaborate  link  parsing  mechanisms  ensure  that  your  site 

remains  intact  when  you  move  files  to  other  folders  in  the  Site  Win- 
dow, immediately  prompting  you  to  update  all  hyperlinks  and  file 
references. 

Errors  are  usually  caused  by  moving,  deleting,  or  renaming  physical 
files  in  the  Finder,  resulting  in  missing  files  and  broken  links.  These 
problems  produce  specific  error  messages  that  help  you  track  down 
the  problem  with  ease. 


Analyzing  Missing  File 
Problems 


Click  the  icon  bar  to 
display  the  right 
pane  of  the  Site 
Window. 


If  you  see  error  indicators  at  the  top  of  the  Site  Window  or  in  the  Sta- 
tus column  of  the  Files  tab,  analyze  and  repair  them  immediately. 

To  inspect  your  site  for  errors,  proceed  as  follows: 

1 If  the  S/fe  Window  is  in  single-pane  mode,  click  the  icon  bar  in  the 
upper  right  corner  of  the  Site  Window  to  display  the  right  pane, 
then  click  the  vertical  tab  rider  labeled  Errors. 

If  the  Site  Window  is  in  dual-pane  mode,  click  the  vertical  tab  rid- 
er labeled  Errors  in  the  right  pane  (if  not  already  open). 

2 The  E/rors  tab  displays  a detailed  description  of  the  problem.  The 
entries  listed  under  the  Missing  files  category  indicate  which  spe- 
cific files  couldn’t  be  found  although  pages  in  your  site  reference 
them. 


3 Go  back  to  the  files  list  in  the  left  pane  of  the  Site  Window  and 
find  out  which  error  indicators  are  displayed  for  a particular  file: 


Error  Indicators 

Problem 

Q 

+ 

* 

A Web  page  is  present  in  the  site  folder,  but  it  contains  a hyperlink  or 
file  reference  whose  target  can’t  be  found.  The  referenced  file  has  prob- 
ably been  renamed,  moved,  or  deleted. 

0 

+ 

O 

The  physical  file  has  been  moved  out  of  or  deleted  from  the  site  folder. 

4 Consult  the  URL  column  of  the  Errors  tab  in  the  right  pane  of  the 
Site  Window.  It  tells  you  where  the  missing  referenced  file  was  lo- 
cated, complete  with  its  directory  path. 

5 Select  the  file  icon  in  the  Errors  tab,  then  click  the  Open  Link  In- 
spector button  [m]  in  the  Site  Toolbar  to  open  the  Link  Inspector 
window  (see  page  673). 

6 This  window  is  very  convenient  fortroubleshootinga  filefor  bro- 
ken links  and  invalid  references.  The  section  Repairing  Broken 
Links  and  Invalid  File  References  explains  its  use. 


Maintaining  Site  Integrity 


687 


Analyzing  Error 
Messages  Caused  by 
External  References 


Repairing  Broken 
Links  and  Invalid 
File  References 

Troubleshooting  Broken 
Links  at  Page  Level 


A less  specific  error  message  may  occur  when  you  reference  ex- 
ternal URLs  in  your  site.  Adobe  GoLive’s  site  preferences  let  you 
choose  whether  you  want  to  check  external  URLs  or  take  them  for 
granted.  If  you  use  this  option,  two  situations  may  produce  a 
“bug”  icon  at  the  top  of  the  Site  Window,  but  no  specific  entry  in 
the  Errors  tab: 

- Problem:  You  are  working  without  permanent  online  access 
to  the  Web,  but  have  the  Check  external  URLs  option  enabled 
in  the  first-level  Site  Preferences  dialog  box  (see  page  709). 
Solution:  Disable  the  Check  external  URLs  option. 

- Problem:  You  are  working  with  permanent  online  access  to 
the  Web,  have  the  Check  external  URLs  option  enabled,  but 
the  URL  is  incomplete. 

Solution:  Check  the  URL  and  correct  it  in  the  page  that  con- 
tains the  reference. 


When  the  Errors  tab  of  the  Site  Window  displays  an  error,  it  is  very 
likely  that  somebody  has  accidentally  moved,  deleted,  or  renamed  a 
file  that  your  site  needs  because  it  is  referenced  by  pages. 


Using  the  Link  Warnings  feature,  which  is  available  in  Adobe  GoLive’s 

Layout  and  Outline  views,  you  can  troubleshoot  a broken  link  prob- 
lem at  page  level: 

1 In  the  Site  Window,  double-click  a page  displayed  with  a “bug”  er- 
ror indicator  in  the  Status  column. 

2 After  opening  the  file,  locate  missing  objects  in  the  page  dis- 
play— for  example,  image  placeholders  appear  where  an  image 
used  to  be. 

3 Click  the  Link  Warnings  button  SO  in  the  Toolbar. 

4 Look  for  objects  or  text  with  a red  border. 

5 Select  the  object  or  the  text  and  inspect  its  hyperlink  or  file  refer- 
ence in  the  URL  text  box  of  the  Inspector. 

6 Renew  the  hyperlink  or  file  reference  using  Point  & Shoot  or  an- 
other appropriate  method. 

7 When  the  error  has  been  remedied,  the  Errors  tab  will  go  blank 
and  the  error  indicators  will  disappear  from  the  top  of  the  Site 
Window. 

For  more  detailed  instructions,  please  refer  to  the  section  Link  Warn- 
ings on  page  180  in  Chapter  4,  Building  Web  Pages. 
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Troubleshooting  a 
Renamed  File  at 
Site  Level 


Troubleshooting  a Renamed  File 


If  somebody  has  accidentally  renamed  a file  in  the  Finder,  Adobe 
GoLive  reports  a missing  file  in  the  Errors  tab.  Because  the  file  is  not 
actually  missing,  this  problem  is  relatively  easy  to  troubleshoot,  es- 
pecially if  it  was  only  a minor  change  in  the  file  name. 

To  troubleshoot  a renamed  file,  proceed  as  follows: 

1 Trytofind  outwho  renamed  thefileand  what  heorshe  renamed 
it  to. 

2 Select  the  missing  file  object  in  the  Errors  tab  of  the  Site  Window. 

3 Click  the  Open  Link  Inspector  button  [jED  in  the  Site  Toolbar. 

4 The  Link  Inspector  window  appears,  indicating  which  pages  have 
referenced  that  file  before. 
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5 Locate  the  renamed  file  in  the  Files  tab  of  the  Site  Window. 

6 Click  the  Point  & Shoot  button  next  to  the  missing  file  icon  in  the 
Link  Inspector,  then  drag  at  the  icon  of  the  renamed  file  in  the 
Files  tab. 

7 The  interconnecting  line  blinks  twice  to  indicate  that  Point  & 
Shoot  has  been  successful. 

8 A Change  Reference  dialog  box  appears,  prompting  you  to  con- 
firm that  you  want  Adobe  GoLive  to  update  the  hyperlink  or  file 
reference  you  are  about  to  repair.  Click  OK. 

9 Adobe  GoLive  will  repair  the  faulty  hyperlink  or  file  reference 
now. 

10  The  error  message  should  disappear  from  the  Errors  tab. 
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Troubleshooting  a Moved 
or  Deleted  File  at 
Site  Level 


3 


Using  the  Contextual 
Menu  for  Trouble- 
shooting Missing  File 
Problems 

The  Find  Shortcut  in  the  Contextual 
Menu 


Choose  Find  from  the  contextual  menu  to  open 
the  Find  dialog  box.  The  Find  File  tab  will  appear 
in  front. 


If  somebody  has  accidentally  moved  a file  out  of  the  site  folder  or  de- 
leted it  altogether,  Adobe  GoLive  reports  a missing  file  in  the  Errors 
tab.  Because  the  file  is  not  in  the  site  folder  and  is  beyond  the  reach 
of  Adobe  GoLive’s  site  management  tools,  this  problem  is  more  diffi- 
cult to  troubleshoot. 

To  find  a missing  file,  proceed  as  follows: 

1 Click  the  Open  Link  Inspector  button  GEE)  in  the  Site  Toolbar  and 
use  the  Link  Inspector  window  to  find  out  which  pages  have  ref- 
erenced that  file  before. 

2 Consult  the  URL  column  of  the  Errors  tab  to  discover  where  the 
missing  file  was  located. 

3 Switch  to  the  Finder  and  try  to  locate  the  missing  file  using,  for 
example,  the  Find  command. 

4 When  you  find  the  file,  drag  it  back  to  its  original  location  in  the 
left  pane  of  the  Files  tab. 

5 A Change  Reference  dialog  box  appears,  prompting  you  to  con- 
firm that  you  want  Adobe  GoLive  to  update  the  hyperlinks  or  file 
references  you  are  about  to  repair.  Click  OK. 

6 Adobe  GoLive  will  repair  the  references  and  update  the  site.  The 
error  message  should  disappear  from  the  Errors  tab  now. 


Adobe  GoLive  offers  a Find  shortcut  on  a contextual  menu  that  ap- 
pears when  you  Control-click  a missing  file  item  in  the  Error  tab  in 
the  right  pane  of  the  Site  Window. 
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Part  26 — 


General 


Choosing  the  new  Find  option  brings  up  Adobe  GoLive’s  Find  dialog 
box  with  the  Find  File  tab  (see  page  592)  in  the  front  and  the  file- 
name already  entered  in  the  Find  text  box.  All  you  have  to  do  is  click 
the  Find  button  to  have  Adobe  GoLive  search  the  site  folder  for  the 
missing  file. 


Uploading  and  Downloading 

Part  26  describes  how  to  use  Adobe  GoLive’s  built-in  FTP  tool  (File 
Transfer  Protocol)  to  access  your  site  in  the  upload  area  on  your  ISP’s 
server.  It  also  discusses  the  optional  Export  Site  tool,  which  lets  you 
gather  scattered  resources  before  uploading.  Part  26  has  six  major 
sections: 

• The  General  section,  starting  on  page  690,  introduces  Adobe 
GoLive’s  FTP  and  Export  Site  tools. 

• The  Uploading  Your  Site  Using  the  Built-In  FTP  Fool  section,  start- 
ing on  page  691,  explains  how  to  use  FTP  in  the  Site  Window. 

• Using  the  Standalone  FTP  Upload  & Download  Window,  starting 
on  page  696,  describes  the  standalone  FTP  window  that  can  be 
invoked  from  the  File  menu. 

• The  Setting  FTP  Preferences  section,  starting  on  page  697,  intro- 
duces Adobe  GoLive’s  FTP  options. 

• The  Exporting  Your  Site  section,  starting  on  page  701,  details  the 
use  of  Adobe  GoLive’s  Export  Site  command  and  tells  you  when  it 
is  indicated  to  export  your  site. 

• Using  the  Web  Download  Feature  on  page  704  outlines  how  to 
download  a selected  Web  page  using  Adobe  GoLive’s  Web  Down- 
load command. 


After  you  have  finished  your  site  building  work  and  all  links  and 
pages  have  tested  OK,  you  can  proceed  to  uploading  your  site  to  the 
Web  server,  so  your  audience  can  browse  your  pages. 

You  will  upload  your  site  to  your  own  Web  server  or  to  a dedicated 
directory  set  aside  for  you  on  your  ISP’s  server.  Alternatively,  you  can 
also  stage  your  site  on  a local  server  to  have  your  colleagues  test  it 
before  you  upload  it  to  its  final  destination. 
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Adobe  GoLive  has  two  FTP  tools: 

• The  built-in  FTP  tool  is  integrated  in  the  Site  Window.  It  resides 
in  a vertical  tab  in  the  right  pane.  You’ll  use  this  FTP  tool  to 
upload  your  site  to  the  Web  server  or  edit  pages  remotely. 

• The  standalone  FTP  Upload  & Download  window,  already  famil- 
iar to  users  of  earlier  versions,  allows  you  to  access  FTP  servers 
on  the  Web  and  upload  or  download  files  from  within  the  appli- 
cation. 

Optionally,  you  can  prepare  your  site  for  publishing  using  the  Export 
Site  command.  Export  Site  assembles  all  folders,  pages,  images,  and 
media  files  you  need  in  a common  folder  for  uploading  (similar  to  a 
desktop  publishing  program  compiling  a print  job  before  it  goes  to 
the  service  bureau).  You  may  want  to  use  this  option  if  your  ISP  re- 
quires you  to  use  a special  way  of  organizing  the  files  within  your  site 
folder.  You  don’t  need  the  Export  Site  command  if  you  are  free  to  use 
your  own  folder  hierarchy.  Adobe  GoLive  sees  to  it  that  your  site  is 
kept  together  in  the  site  folder  on  your  hard  disk,  which  can  be  up- 
loaded “as  is”  if  no  special  restrictions  apply. 


Uploading  Your  Site 
Using  the  Built-In 
FTP  Tool 


Adobe  GoLive’s  built-in  FTP  tool  gives  you  a host  of  options  for  ac- 
cessing FTP  servers  and  it  lets  you  preview  and  stage  pages  and  sites 
before  uploading  them  to  your  Web  server. 

Three  FTP  access  options  are  available: 

• You  can  easily  upload  or  download  individual  Web  pages  or  an 
entire  Web  site. 

• You  can  edit  your  site  locally,  then  run  an  incremental  update 
on  the  remote  server,  overwriting  only  the  files  that  have 
changed. 

• You  can  edit  your  site  on  the  remote  server,  then  run  an  incre- 
mental update  on  your  local  hard  disk,  overwriting  only  the  files 
that  have  changed. 

Uploading  to  or  downloading  from  the  remote  server  and  updating 
files  is  a simple  drag  & drop  process.  You  connect  to  the  server  in 
your  familiar  Site  Window  (see  Connecting  to  an  FTP  Server  below), 
open  the  FTP  tab  in  the  window’s  right  pane,  then  drag  files  and  fold- 
ers from  the  Files  tab  onto  the  FTP  tab  or  vice  versa. 

The  following  screenshot  illustrates  the  process  of  updating  a se- 
lected file  after  your  site  has  been  uploaded  to  the  FTP  server. 
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Updating  a File  via  FTP 


While  connected,  dragyour  selection  from  the  left 
pane  of  the  files  tab  onto  the  right  pane. 


= Newsletter  Site  = 

1 “aSn  Site  1 0 External  1 Q Colors  1 /}  Font  sets  | 


HJIID 


Cj  html 

(E\  airbaja.html 

BonusPrograms.... 
Q SubscriptionFor... 
B TravelingUnlimit. . . 

— q msmssm 

> CJ  image 

B index.html 

items  | < | ill  | ~ 


Status  URL 


/MacOS8/Deskt< 

/MacOS8/Deskt( 

/MacOS8/Deskt< 

/MacOS8/Desktc 

/MacOS8/Desktc 


/MacOSS/Desktc 

/MacOS8/Deskt< 


CJ  html 

k~*L  airbaja.html 
n BonusPrograms.... 
ET  SubscriptionFor... 
a TravelingUnlimit... 

I>  image 

k~\  index.html 


Adobe  GoLive  suppports  most  popular  server  platforms,  including 
Sun  OS,  Sun  Solaris,  Windows  NT,  and  others. 


Connecting  to  an 
FTP  Server 

L«agBI 

Click  the  icon  bar  to 
display  the  right 
pane  of  the  Site 
Window. 


To  connect  to  the  FTP  server  specified  in  the  setup,  proceed  as  fol- 
lows: 

1 If  the  S/fe  Window  is  in  single-pane  mode,  click  the  icon  bar  in  the 
upper  right  corner  of  the  Site  Window  to  display  the  right  pane, 
then  click  the  vertical  tab  rider  labeled  FTP. 

If  the  Site  Window  is  in  dual-pane  mode,  click  the  vertical  tab  rid- 
er labeled  FTP  in  the  right  pane  (if  not  already  open). 

2 Click  the  FTP  Server  Connect/Disconnect  button  jsj  in  the  Site 
Toolbar  to  access  the  server. 

If  this  is  the  first  time  you  connect  to  an  FTP  server,  a dialog  box 
will  prompt  you  to  specify  the  server  location.  The  next  section 
gives  instructions  for  setting  up  your  FTP  access. 

3 Adobe  GoLive  starts  connecting  to  the  FTP  server.  Messages  in  the 
status  line  at  the  bottom  of  the  FTP  tab  indicate  this  activity: 

- Connecting...  indicates  that  Adobe  GoLive  is  accessing  the 
server. 

- Getting  file  list. . . indicates  that  the  connection  has  been  es- 
tablished and  that  Adobe  GoLive  is  reading  the  content  of  the 
target  directory. 

- Connected  indicates  that  Adobe  GoLive  is  online. 

4 If  this  is  the  first  time  you  upload  your  site,  you  will  most  likely 
see  an  empty  directory  in  the  right  pane  of  the  Site  Window.  If 
your  site  has  been  uploaded  before,  a file  list  similar  to  the  one 
in  the  left  pane  will  appear. 
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5 You  can  now  upload  your  site,  dick  an  icon  in  the  FTP  tab  to  edit 
a file  remotely,  or  download  files  from  the  FTP  server  to  your  lo- 
cal hard  disk. 


Setup  for  FTP  Access  To  access  an  FTP  server,  you  need  to  know  the  FTP  address,  the  path 

to  your  personal  directory,  and  your  user  name  and  password.  If  you 
are  not  sure,  ask  the  administrator  in  charge  of  the  Web  server  to  set 
up  an  account  for  you. 

Setting  up  Adobe  GoLive  for  FTP  access  involves  two  steps: 

• In  the  first  step,  you  specify  the  basic  settings  for  server  address, 
target  directory,  your  identity,  and  various  communication- 
related  settings. 

• In  the  second  step,  you  set  a few  rules  that  determine  what  to 
upload  and  how. 


To  make  basic  settings  for  FTP  access,  proceed  as  follows: 

1 Make  sure  that  you  have  the  PPP,  TCP/IP,  and  Modem  control 
panels  set  up  properly  on  your  Macintosh.  For  more  detail, 
please  consult  the  user  manual  of  your  modem  or  ISDN  adapter. 

2 Click  the  Site  Settings  button  O in  the  Site  Toolbar. 

3 The  Site  Settings  dialog  box  appears  (see  below). 

4 In  the  left  section  of  the  dialog  box,  click  the  FTP  icon. 


The  FTP  Pane  of  the  Site  Settings 
Dialog  Box 


Click  the  FTP  icon  to  enter  basic  FTP  server  access 
settings  and  specify  rules  for  FTP  upload. 
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DC 


5  In  the  Server  text  box,  type  in  the  FTP  address  specified  by  your 
ISP  for  the  Web  server  you  want  to  upload  to. 
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6 In  the  Directory  text  box,  type  in  the  directory  path  to  your  per- 
sonal folder  on  the  Web  server. 

If  you  specify  a directory,  Adobe  GoLive  will  try  to  connect  to  that 
directory.  In  most  cases,  however,  you  can  leave  this  text  box 
blank  because  your  access  privileges  will  typically  be  restricted  to 
your  personal  folder. 

7 In  the  Username  text  box,  type  in  the  user  ID  that  the  server  ad- 
ministrator gave  you. 

8 In  the  Password  text  box,  type  in  the  personal  password  you  re- 
ceived from  the  server  administrator. 

9 If  you  want  to  skip  the  password  entry  text  box  the  next  time  you 
connect  to  the  server  (and  for  future  sessions),  enable  the  Re- 
member Password  option. 

10  Place  the  cursor  in  the  Port  text  box  and  type  in  the  number  of 
the  port  you  will  use  to  access  your  Web  server,  for  example  “21”, 
which  is  frequently  used.  If  in  doubt  about  the  port  number,  con- 
sult your  server  administrator. 

11  If  a firewall  protects  the  FTP  server,  you  may  have  to  check  the 
Use  passive  mode  checkbox  (see  page  699  fora  short  description). 

To  specify  rules  for  FTP  upload,  proceed  as  follows: 

1 Go  to  the  Upload  section  of  the  Site  Settings  dialog  box. 

2 If  you  have  made  regular  use  of  the  Publish  option  in  the  File, 
Folder,  and  Group  Inspectors,  select  the  two  checkboxes  in  the 
Honor  “Publish” State  group  of  options  to  ensure  that  all  your 
preferred  items  are  uploaded  correctly. 

3 Select  the  Upload  referenced  files  only  checkbox  if  you  want  to  en- 
sure that  you  don’t  upload  any  excess  files. 


Please  note  that  Adobe  GoLive  does  not  manage  links  to  pages 
or  references  to  images  embedded  in  JavaScript  code.  When 
publishing  your  site,  you  may  need  to  upload  them  separately 
into  their  respective  folders  or  directories. 


4 Pick  the  Show  list  of  files  to  upload  checkbox  if  you  want  to  check 
the  file  list  before  uploading. 

5 Select  the  Show  options  dialog  checkbox  if  you  want  Adobe 
GoLive  to  display  a dialog  box  with  the  same  options  as  the  Up- 
load pane  of  the  site  Settings  dialog  box  every  time  you  start  up- 
loading. 

The  basic  setup  is  finished.  You  can  now  connect  to  the  FTP  server. 
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Uploading 
Your  Site 


To  upload  to  or  incrementally  update  your  site  on  the  remote  server, 

proceed  as  follows: 

1 Connect  to  the  server,  as  explained  in  the  preceding  section. 

2 Click  the  Upload  to  Server  button  E5)  in  the  Site  Toolbar  or  select 
the  files  or  folders  you  want  to  upload  in  the  left  pane  of  the  Site 
Window  and  drag  them  onto  the  right  pane. 

3 If  this  is  a first-time  upload,  your  site  will  be  copied  to  the  FTP 
server  now.  If  a copy  of  your  site  already  exists  on  the  remote 
server,  Adobe  GoLive  will  only  copy  the  files  that  have  been 
changed  since  the  last  upload. 

4 An  Uploading...  message  appears  in  the  status  line  at  the  bottom 
of  the  FTP  tab  to  indicate  that  your  site  is  being  copied  to  the 
server. 

5 When  Adobe  GoLive  finishes  uploading,  the  message  in  the  status 
line  reverts  to  Connected. 

6 Click  the  FTP  Server  Connect/Disconnect  button  QD  to  disconnect. 


Downloading 

Files 


To  download  files  or  folders  or  incrementally  update  your  site  on 

your  local  hard  disk  after  editing  files  on  the  server,  proceed  as  fol- 
lows: 

1 Connect  to  the  server,  as  explained  in  the  preceding  section. 

2 Click  the  Download  from  Server  button  in  the  Site  Toolbar  or 

select  the  files  you  want  to  download  in  the  right  pane  of  the  Site 
Window  and  drag  them  onto  the  left  pane. 

3 If  you  copy  files  you  have  edited  on  the  remote  server,  Adobe 
GoLive  will  only  copy  files  that  have  a newer  modification  date. 

4 A Downloading...  message  appears  in  the  status  line  at  the  bot- 
tom of  the  FTP  tab  to  indicate  that  your  site  is  being  copied  to  the 
local  hard  disk. 

5 When  Adobe  GoLive  finishes  downloading,  the  message  in  the 
status  line  reverts  to  Connected. 

6 Click  the  FTP  Server  Connect/Disconnect  button  SI  to  disconnect. 


For  information  about  FTP  error  messages,  please  check: 
ftp://nic.merit.edu/documents/rfc/rfc0959.txt. 
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Using  the  Standalone 
FTP  Upload  & Down- 
load Window 


Using  the  standalone  FTP  Upload  & Download  window  is  as  transpar- 
ent as  FTP  access  via  the  built-in  FTP  tool  in  the  Site  Window.  You  can 
connect  to  an  FTP  server  and  copy  files  in  either  direction,  provided 
your  access  privileges  allow  you  to  do  so. 

The  following  screenshot  illustrates  the  process  of  uploading  a folder 
via  drag  & drop. 


Uploading  a Folder  with  Adobe  GoLive’s 
Standalone  FTP  Window 


Uploading  or  downloading  files  is  a drag  & drop 
process. 


To  upload  or  download  files  using  the  standalone  FTP  window,  pro- 
ceed as  follows: 

1 Make  sure  that  you  have  properly  set  up  the  PPP,  TCP/IP,  and  Mo- 
dem control  panels  on  your  Macintosh.  For  more  details,  please 
consult  the  user  manual  of  your  modem  or  ISDN  adapter. 

2 Choose  the  FTP  Upload  & Download  command  from  the  File 
menu  to  open  the  FTP  Upload  & Download  window. 

3 I n the  Server  text  box,  type  the  FTP  add  ress  of  the  Web  server  you 
want  to  access. 

4 In  the  Directory  text  box,  type  the  directory  path  to  your  personal 
folder  on  the  FTP  server. 
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If  you  specify  a directory,  Adobe  GoLive  will  try  to  connect  to  that 
directory.  In  most  cases,  however,  you  can  leave  this  text  box 
blank  because  your  access  privileges  will  typically  be  restricted  to 
your  personal  folder. 

5 In  the  User  Name  text  box,  type  in  the  user  ID  that  the  server  ad- 
ministrator assigned  you.  (If  you  want  to  access  a public  down- 
load area,  you  can  often  use  the  Anonymous  user  ID,  which 
doesn’t  require  a password.) 

6 In  the  Password  text  box,  type  in  the  personal  password  that  the 
server  administrator  gave  you,  if  necessary. 

7 Click  Connect  to  dial  into  the  remote  server. 

8 After  connecting  to  the  remote  server,  Adobe  GoLive  will  display 
the  directory  on  the  remote  server  volume. 

9 To  download,  drag  files  or  folders  one  at  a time  from  the  FTP  Up- 
load & Download  window  to  the  Finder.  To  upload,  do  the  re- 
verse, if  your  user  ID  and  passsword  allow. 

Tip:  Instead  of  entering  the  server  information  each  time  you 

connect,  you  can  also  specify  servers  in  the  FTP  preferences. 

The  servers  you  specify  appear  in  the  popup  menu  next  to  the 

User  Name  text  box. 

If  you  have  already  specified  servers  for  the  built-in  FTP  tool, 

they  will  also  be  available  on  the  popup  menu  in  the  FTP  Upload 

& Download  window. 


Setting  FTP 
Preferences 


Internet  Config  Support  and  Server  Preferences 

The  first-level  tab  of  the  Network  group  of  options  in  the  Preferences 
dialog  box  lets  you  set  general  Internet  access  options,  such  as  proxy 
server  addresses. 

As  is  the  case  with  many  Macintosh  applications  accessing  servers  on 
the  Web,  Adobe  GoLive  can  yield  control  over  FTP  preferences  to  In- 
ternet Config  and  launch  that  program  directly  from  within  the  Net- 
work group  of  options  in  the  Preferences  dialog. 

The  Internet  Config  utility  manages  the  preferences  for  your  Internet 
applications,  including  your  E-mail  client,  FTP  utility  , and  news- 
group  application. 

If  Internet  Config  wasn’t  included  in  your  MacOS  package,  you  can 
download  for  free  it  from  the  Web.  Here  is  just  one  of  the  numerous 
locations  that  offer  this  useful  utility: 

ftp://ftp.tidbits.com/pub/tidbits/select/. 
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Control  through  / nternet  Config  is  also  available  on  the  FTP  Download 
tab,  where  file  name  extensions  can  be  mapped  to  application  pro- 
grams on  your  Macintosh. 


The  Preferences  - Network  Dialog  Box 


Click  the  Network  icon  to  set  general  FTP  prefer- 
ences, including  configuration  via  Internet  Con- 
fig  and  proxy  server  selection. 


To  set  up  the  general  Internet  access  preferences,  proceed  as  follows: 

1 Check  the  Use  always  checkbox  to  have  Adobe  GoLive  default  to 
the  Internet  Config  Settings  or  click  the  Import  Now  button  to  use 
them  for  the  current  session  only.  Either  option  turns  over  con- 
trol of  your  Internet  access  to  the  In ternet  Config  program.  Inter- 
net Config  stores  Internet  addresses  and  Web-specific  settings  for 
all  applications  on  your  Macintosh  that  have  access  to  the  Web, 
including  settings  for  Adobe  GoLive,  Web  browsers,  FTP  software, 
and  front  end  programs  for  search  engines. 

To  edit  the  FTP  server  access  preferences,  click  the  Open  Internet 
Config...  button. 

2 Check  the  Use  FTP  Proxy  checkbox  if  your  ISP  uses  a proxy  server 
for  security  reasons.  A proxy  server  acts  as  a front  end  for  the  ac- 
tual Web  server,  intercepting  viruses  and  increasing  overall  secu- 
rity in  server  operations.  If  in  doubt,  ask  your  server 
administrator  whether  your  ISP  uses  a proxy  server. 

3 Place  the  cursor  in  the  Port  text  box  and  type  in  the  number  of 
the  port  you  will  use  to  access  your  Web  server.  If  in  doubt,  try 
“21”,  which  is  a frequently  used  port  number,  or  consult  your 
server  administrator. 

4 Repeat  steps  2 and  3 above  for  the  HTTP  proxy  server,  if  required. 
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5 If  the  server  administrator  requires  you  to  connect  in  Passive 
Mode,  check  the  Use  passive  mode  (PASV)  checkbox.  If  this  check- 
box is  selected,  Adobe  GoLive  will  initiate  the  connection,  rather 
than  requesting  the  server  to  connect  back  to  your  Macintosh. 
Some  firewalls  rule  out  incoming  connections.  This  option  en- 
ables Adobe  GoLive’s  FTP  tool  to  overcome  those  firewall  restric- 
tions. 


Favorite  FTP  Servers 

You  can  manage  a list  of  favorite  FTP  servers  using  the  Preferences  - 
Network  - FTP  Server  Dialog  Box. 


The  Preferences  - Network  - FTP  Server 
Dialog  Box 


Click  the  FTP  Server  item  to  manage  favorite  serv- 
ers. 


Use  these  options  to  enter  new  FTP  servers  or  de- 
lete selected  items  from  the  list. 
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To  add  an  FTP  server  to  the  FTP  Server  list,  proceed  as  follows: 

1 Click  the  New  button  to  enable  the  Server  (left)  and  Directory 
(right)  text  boxes. 

2 Enter  the  FTP  address  of  the  server  and  press  the  Tab  key  to  move 
the  cursor  to  the  Directory  text  box. 

3 Enter  the  desired  directory  and  press  the  Tab  key  to  move  the 
cursor  to  the  Username  text  box.  Press  the  Return  key  to  confirm 
your  entry. 

4 When  you  finish  entering  FTP  servers,  click  the  OK  button  to  close 
the  Preferences  dialog  box. 

To  delete  an  FTP  server  from  the  FTP  Server  list,  proceed  as  follows: 

Click  the  Delete  button  to  remove  a selected  server  entry  from  the 
list,  if  necessary. 
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FTP  Download  Preferences 


The  Preferences  - Network  - FTP  Download  dialog  box  allows  you  to 
assign  a program  on  your  Macintosh  to  files  you  download  from  the 
Web. 

The  Macintosh  uses  a special  four-character  code  to  identify  file 
types  and  creators,  allowing  the  user  to  open  files  by  double-clicking. 


The  Preferences  - Network  - 
FTP  Download  Dialog  Box 


Click  the  FTP  Download  item  to  assign  file  types 
to  applications. 
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Files  downloaded  from  a Windows  NT  or  UNIX-based  Web  server, 
however,  don’t  contain  any  file  type  and  creator  information,  so  you 
will  have  to  tell  your  Macintosh  which  program  to  use  in  order  to 
open  them.  This  is  accomplished  by  mapping  a file  name  extension 
such  as  .GIF  or  .HTML  to  a Macintosh  application. 

To  map  file  name  suffixes  to  Macintosh  applications,  proceed  as  fol- 
lows: 

1 Click  New  to  add  a new  entry  to  the  list  box. 

2 Type  in  the  appropriate  description  in  the  Suffix,  Type,  and  Cre- 
ator text  boxes  or  click  Select...  to  select  an  application  in  the 
subsequent  dialog  box. 

3 Choose  an  option  from  the  popup  menu  below  the  Transfer  col- 
umn to  select  the  way  you  wish  to  have  your  files  transferred: 

Text  downloads  the  file  as  a text  file.  Use  this  option  for  HTML 
pages  and  general  text  files. 

- Binary  downloads  the  file  as  a binary  file.  Use  this  option  for 
all  other  files. 
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Alternatively,  you  can  drag  an  unknown  file  from  the  Finder  at  the 
FTP  Download  pane  and  drop  it  on  the  mappings  list  to  have  Adobe 
GoLive  make  the  assignment. 

Clicking  Delete  removes  a selected  mapping,  while  the  Import  Now 
button  lets  you  import  mappings  from  Internet  Config. 


Exporting  Your  Site 


Optionally,  if  your  Web  master  requires  you  to  use  a special  folder 
structure,  you  can  use  the  Export  Site  command  to  assemble  your  site 
before  uploading. 

To  export  your  site,  proceed  as  follows: 

1 With  the  Site  Window  open,  choose  the  Export  Site  command 
from  the  Site  menu. 

2 When  you  select  the  Export  Site  command  from  the  Site  menu,  an 
Export  Site  Options  dialog  box  will  prompt  you  to  select  various 
options  relating  to  folder  hierarchies  and  publish  status. 


With  the  exception  of  the  Set  as  default  button,  the  same  set  of 
options  is  available  in  the  Preferences  - Site  - Export  dialog  box 
(see  page  711  for  more  details). 


The  Export  Site  Options  Dialog  Box 


Use  these  options  to  determine  how  your  site  is 
assembled  when  exporting. 


Use  these  options  to  preselect  files  and  folders 
by  their  publishing  status. 


Use  these  options  to  control  the  way  referenced 
files  will  be  published. 


Click  the  Set  as  default  button  if  you  want  Adobe 
GoLive  to  use  current  settings  as  the  default  con- 
figuration. 


Export  Site  Options 
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| Export.. 


3 The  Hierarchy  options  permit  you  to  control  the  underlying  direc- 
tory structure  of  your  site  before  uploading  to  the  Web  server. 
Use  these  options  as  follows: 

- As  in  site  maps  the  hierarchy  of  groups,  pages,  and  resources 
within  your  Site  Window  to  the  resulting  site  folder. 
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Hierarchy  Options  and 
Resulting  Folder  Structures 


- Separate  pages  and  media  creates  a site  folder  containing  two 
subfolders  for  HTML  pages  and  media  items,  respectively. 

- Flat  creates  a site  folder  containing  all  HTML  pages  and  me- 
dia items,  but  no  subfolders. 

Tip:  You  can  open  the  Preferences  - Site  - Folder  Names 
dialog  box  (see  page  712)  and  edit  the  default  folder  names 
used  for  exporting  the  site. 

The  following  illustration  presents  the  result  of  the  three  FUerarchy 
options. 


As  in  site 


Separate  pages  and  media 


Flat 


4 The  Ftonor  "Publish”  state  of  group  of  options  with  its  two  check- 
boxes lets  you  decide  which  files  and  folders  to  export.  In  the 
Honor  "Publish”  state  of  group  of  options,  select: 

- Groups  to  have  Adobe  GoLive  export  all  folders  and  groups 
that  have  their  Publish  status  set  accordingly  in  the  File  tab  of 
the  Folder  Inspector  (see  page  638  for  reference). 

- Pages  to  have  Adobe  GoLive  export  all  HTML  pages  that  have 
their  Publish  status  set  accordingly  in  the  File  tab  of  the  File 
Inspector  (see  page  645  for  reference). 

5 Additionally,  we  recommend  that  you  check  the  Export  only  ref- 
erenced files  option  to  have  Adobe  GoLive  include  only  referenced 
HTML  pages  and  media  files  from  the  current  project  into  the  site 
folder.  This  option  yields  small  sites  and  minimizes  redundancy 
by  omitting  all  files  that  are  not  referenced  by  any  page  within 
the  site. 
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The  HTML  Options  dialog  box 


6 You  shou  Id  also  check  the  Export  referenced  files  that  are  not  part 
of  the  site  option  to  have  Adobe  GoLive  placeall  referenced  HTML 
pages,  media  files,  and  other  resources  in  the  site  folder,  includ- 
ing files  from  external  volumes.  This  is  a safe  choice  that  keeps 
your  site  intact. 

7 Selecting  the  Don’t  show  again  checkbox  hides  the  Export  Site  Op- 
tions dialog  in  future  sessions. 

8 Clicking  the  Set  as  default  button  saves  the  current  settings  to 
Adobe  GoLive’s  preferences. 

9 Optionally,  you  can  click  the  More. . . button  to  have  Adobe 
GoLive  streamline  the  HTML  source  code  when  exporting  the  site. 
Clicking  the  More...  button  opens  the  HTML  Options  dialog  box 
shown  below. 


The  checkboxes  in  the  HTML  Options  dialog  box  let  you  strip  off 
selected  source  code  elements  to  generate  “pure”  HTML — with- 
out compromising  the  integrity  of  the  visual  presentation.  The 
following  source  code  streamlining  options  are  available: 

- Adobe  GoLive  tags  removes  application-specific  tags  and  at- 
tributes. If  your  pages  contain  animation,  scripted  actions,  or 
custom  plugins,  you  can  use  this  checkbox  to  protect  your 
work  and  deny  editing  to  other  Adobe  GoLive  users. 

- Comments  removes  HTML  comments  created  using  the  body 
and  header  comment  icons  from  the  Palette. 

- Spaces  removes  the  whitespace  characters  used  to  indent 
lower-level  tags. 

- Linefeeds  removesall  carriage  return  and  linefeed  characters, 
creating  an  HTML  flow  without  line  breaks. 

10  When  you  are  finished  selecting  options,  click  the  Export  button 
in  the  Export  Site  Options  dialog  box  or  click  in  the  Preferences  - 
Site  - Folder  Names  dialog  box  to  resume  exporting. 
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The  Create  a Site  Folder  Dialog  Box 


Adobe  GoLive  Displays  a Message 
When  Finished  Exporting 


Using  the  Web 
Download  Feature 


3) 


11  Another  dialog  box  appears,  prompting  you  to  indicate  where 
you  want  Adobe  GoLive  to  save  your  site  folder. 
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Select  an  appropriate  location  and  click  Save  to  have  Adobe  GoLive 
assemble  the  site  now. 

12  The  Site  exported  successfully  message  informs  you  that  the  site 
folder  is  ready  for  uploading. 

Site  exported  successfully! 

1 Details  | |'[  OK  | 


When  the  Site  exported  successfully  message  box  hints  at  files  that 
were  not  published,  check  the  Publish  referenced  files  that  are  not 
part  of  the  site  option  in  the  Export  Site  Options  dialog  box  and  try 
again.  If  error  messages  persist,  use  Adobe  GoLive’s  error  analysis 
tools  or  stage  your  site  on  a local  server  and  check  all  links. 


The  Web  Download  command  is  a powerful  feature  that  lets  users 
with  access  to  the  Internet  download  a selected  Web  page  complete 
with  all  images  and  media  files  and  save  it  to  a folder.  This  feature 
can’t  substitute  a complete  FTP  download  of  a site,  because  it  yields 
a flat  file  structure  that  differs  from  the  structure  on  the  Web  site. 

To  download  a Web  page,  proceed  as  follows: 

1 Choose  the  Web  Download  command  from  the  File  menu. 

2 The  Web  Download  dialog  box  appears,  prompting  you  to  enter 
the  URL  for  the  page  you  want  to  download. 
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The  Web  Download  Dialog  Box 


The  Contaction  Host  Dialog  Box 


3 Type  in  the  URL  or  copy  and  paste  a URL  from  the  bookmarks 
window  of  your  Web  browser,  then  click  Save  As...  . 

4 A Save  As  dialog  appears,  asking  you  whereto  save  the  download- 
ed page  to. 

5 Select  a location  or  create  a new  folder  to  hold  the  downloaded 
page  and  its  associated  image  and  media  files,  then  click  Save. 

6 A message  indicates  that  the  host  has  been  contacted. 


The  Getting  File  Dialog  Box 


7  One  or  more  messages  appear,  indicating  that  files  are  being 
downloaded. 


8  When  Adobe  GoLive  finishes  downloading,  it  will  open  the  down- 
loaded page,  complete  with  all  images  and  media  (except  for  im- 
ages referenced  in  scripts;  these  are  not  downloaded). 


Please  do  not  reuse  other  people’s  material  in  your  site  without 
their  express  permission,  even  if  the  material  you  download  is- 
not  copyrighted.  The  authors  have  spent  time  and  effort  to  cre- 
ate a unique  Web  presentation. 
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Part  27 — Post-Publishing  Tasks 

Part  27  discusses  general  points  of  interest  for  users  who  are  new  to 

Web  publishing.  It  deals  with  some  post-publishing  issues  you 

should  be  aware  of  when  publishing  to  the  Web  for  the  first  time: 

• The  section  Finding  an  ISP  to  Flost  Your  Web  Site  on  page  706 
suggests  where  to  find  an  Internet  Service  Provider. 

• Acquiring  a Domain  Name  on  page  706  tells  you  why  and  where 
to  acquire  a domain  name. 

• Making  Your  Site  Known  on  the  Web,  starting  on  page  707, 
explains  where  to  announce  your  site. 

• The  section  Registering  with  the  Search  Engines,  starting  on 
page  708,  lists  the  addresses  of  major  search  engines. 


Finding  an  ISP  to  Host 
Your  Web  Site 


If  you  are  designing  pages,  you  probably  already  have  an  ISP.  If  you 
still  lack  an  ISP  or  are  not  content  with  your  ISP’s  services,  here  is  the 
one  place  to  go: 

h ttp://thelist.  in  ter  net.  com 

The  internet.com  site,  also  known  as  The  List™,  gives  you  a choice  of 
more  than  4,000  Internet  Service  Providers — both  national  and  in- 
ternational. You  can  use  this  site  to  shop  around  and  pick  out  the 
provider  that  meets  your  access  speed  and  site  hosting  needs  with- 
out overstretching  your  budget. 


Acquiring  a Although  not  an  absolute  necessity,  a domain  name  is  much  like  a 

Domain  Name  brand  name  or  trademark  that  makes  your  site’s  address  much  more 

accessible  for  new  visitors  and  easier  to  recall  for  frequent  visitors. 

A domain  name  includes  at  least  two  parts: 

• The  subdomain:  This  is  typically  a company  or  organization 
name,  or  an  acronym  , for  example,  adobe. 

• The  high-level  domain:  This  is  the  portion  after  the  dot  in  a Web 
address,  for  example  .com  for  commercial  sites,  .org  for  non- 
profit sites,  .edu  for  schools,  colleges,  and  universities,  or  coun- 
try codes  for  sites  outside  the  United  States  (.jp  for  Japan,  Jr  for 
France,  .de  for  Germany,  .se  for  Sweden,  etc.). 
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Making  Your  Site 
Known  on  the  Web 


Currently,  the  InterNIC  organization  administers  domain  names.  Ac- 
quiring a domain  name  incurs  a one-time  fee  of  US$100  for  a new 
registration  and,  after  two  years,  an  annual  domain  name  renewal 
fee  of  US$50. 

In  most  cases,  your  ISP  will  handle  the  registration  procedure  for 
you.  If  you  decide  to  do  it  on  your  own,  you  can  contact  InterNIC  un- 
der the  following  address: 

h ttp://www.  in  ternic.  net 


When  you  have  completed  your  site  building  job,  it  is  time  to  make 
your  Web  site  known  to  the  world  outside.  Briefly  describe  your  site, 
its  targeted  audience,  and  its  URL,  and  post  your  announcement  in 
the  places  mentioned  below.  Be  sure  to  keep  your  announcement 
free  of  hype;  this  is  considered  bad  “Netiquette.” 

Briefly  describe  your  site  and  its  targeted  audience,  specify  its  URL, 
and  post  your  announcement  in  the  places  mentioned  below. 

Here  are  examples  of  places  to  post  your  announcement: 

• The  sponsorship-funded  Manifest  Service  lets  you  register  online 
to  have  your  announcement  included  in  the  What’s  new  too  list 
(http://newtoo.manifest.com).  The  URL  of  the  submit  form  is: 

http://newtoo.manifest.com/submit.html 

• Many  Internet  marketing  agencies  and  specialized  consultants 
submit  your  site  announcement  to  hundreds  of  search  engines, 
directories,  what’s  new,  and  what’s  cool  sites.  The  following  list 
is  a selection  of  commercial  services: 

- Submit  It!  (both  commercial  and  free  announcement  servic- 
es) at: 

http://www.submit-it.com 

- PostMaster  Announcement  Service  at: 
http://www.netcreations.com/postmaster/ 

Webpromote™  at: 
http://www.webpromote.com/ 

- Pointers  to  Pointers™  at: 
http://www.homecom.com/global/pointers.html 


708 


CHAPTER  17 


Managing  Web  Sites  with  Adobe  GoLive 


Registering  with  the  Search  engines,  also  referred  to  as  spiders,  canvass  the  Web  for  bits 
Search  Engines  °f  information  at  regular  intervals.  They  build  searchable  indexes 

from  the  keywords  they  find  in  the  header  sections  (or,  more  re- 
cently, in  the  body  sections)  of  homepages  or  other  Web  pages.  Be- 
fore you  register,  make  sure  that  your  homepage  includes  an 
appropriate  selection  of  keywords.  For  instructions  on  how  to  enter 
keywords,  please  refer  to  the  section  Keywords  in  Chapter  10,  Work- 
ing with  Head  Tags  (see  page  487). 

Before  you  register  with  the  search  engines,  it  is  good  practice  to  test 
your  site  using  Adobe  GoLive’s  Index  Search  feature.  For  instructions, 
please  refer  to  Index  Search  on  page  587,  in  Chapter  15,  Find  & Re- 
place. 


Search  engines  are  not  the  medium  of  choice  for  short-term 
promotion.  It  is  hard  to  predict  when  they  hit  your  site.  It  may 
take  weeks  or  even  months  or  be  just  a matter  of  days  until 
their  indexes  include  your  site. 


Here  is  a list  of  the  major  search  engines: 

• To  find  out  how  to  register  with  Yahoo!,  visit  the  following  URL: 
h ttp:/ /www. yahoo,  com  /in fo/ 'suggest/ 

• To  register  with  Lycos,  complete  the  form  at: 
h ttp:/ /www.  lycos.  com/addasite.  h tml 

• To  find  out  how  to  register  with  Altavista,  visit  the  following  URL: 
http://www.altavista.digital.com/av/content/addurl.htm 

• To  register  with  Excite,  complete  the  form  at: 
http://www.excite.com/lnfo/add_url.html 

These  lists  are  far  from  being  complete.  If  you  need  more  informa- 
tion about  announcements,  consult  your  Web  master. 


Part  28 — Site  Preferences  and  Options  for  Advanced 
Users 


The  Site  group  of  options  in  the  Preferences  dialog  box  gives  you  ex- 
tensive control  over  the  way  Adobe  GoLive’s  site  management  tools 
behave.  These  options  consist  of  six  different  dialog  boxes: 

• The  first-level  General  Preferences  dialog  box  is  described  on 
page  709. 


The  Site  Preferences  Dialog  Box 
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The  Site  Preferences 
Dialog  Box 

The  Preferences  - Site  - General  Dialog  Box 


Choose  the  Site  - General  icon  to  set  general 
preferences. 


• The  Export  dialog  box  is  described  on  page  71 1 . 

• The  Folder  Names  dialog  box  is  examined  on  page  712. 

• The  Site  View  dialog  box  is  described  on  page  714. 

• The  Page  Status  dialog  box  is  described  on  page  713. 

Two  additional  sections  deal  with  options  for  advanced  users: 

• The  URL  Mappings  section,  starting  on  page  71 5,  details  how  you 
handle  complex  Web  sites  that  reside  in  separate  directories  on 
the  Web  server  or  on  different  Web  servers. 

• The  section  Setting  Up  Adobe  GoLive  to  Use  Absolute  Paths,  start- 
ing on  page  719,  explains  how  you  use  absolute  instead  of  rela- 
tive path  specifications  when  working  with  Adobe  GoLive. 


The  first-level  dialog  box  contains  options  that  influence  the  inter- 
nal parsing  routines  and  the  way  Adobe  GoLive  handles  URLs,  files, 
and  folders. 


The  six  checkbox  options  allow  for  making  the  following  selections: 

• Checking  the  Check  external  URLs  option  instructs  the  program 
to  verify  references  made  to  external  resources  from  within  your 
site  and  report  links  within  your  pages  as  faulty  if  the  targets  do 
not  exist.  This  option  requires  constant  access  to  the  Internet,  so 
you  may  choose  to  disable  it  when  you  are  working  offline. 
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• Checking  the  Reparse  only  changed  project  files  checkbox 
instructs  Adobe  GoLive,  on  opening  the  site  document,  to  verify 
only  the  hyperlinks  and  file  references  of  those  files  that  have 
been  changed  since  the  site  was  saved  last. 

• Checking  the  Spring-loaded  folders  option  makes  folders  dis- 
played in  the  Files  tab  of  the  Site  Window  behave  exactly  as  their 
counterparts  in  the  Macintosh  Finder:  When  you  drag  a selec- 
tion at  a folder  and  wait  a few  seconds,  the  folder  pops  open  to 
let  you  see  its  content. 

• Checking  the  Ask  before  deleting  objects  checkbox  instructs 
Adobe  GoLive  to  prompt  you  for  a confirmation  whenever  you 
try  to  delete  a file  from  the  site. 

• Checking  the  Create  URL  mappings  for  alias  folders  checkbox 
instructs  Adobe  GoLive  to  enter  convert  folder  aliases  you  drag 
into  the  site  folder  to  URL  mappings.  For  a detailed  description 
of  this  feature,  please  refer  to  the  section  URL  Mappings  on 
page  715. 

The  options  in  the  When  removing  files  section  let  you  specify  where 

to  move  excess  files  when  you  use  the  Clean  Up  command  in  the  Site 

Window  (see  the  section  Clearing  the  Site  Folder  on  page  641)  or  de- 
lete a selected  file  using  the  Delete  selected  item  button  from  the  Site 

Fool  bar  (see  page  61 6); 

• Move  files  to  the  Finder  Trash  moves  excess  files  to  the  Trash  on 
your  desktop. 

• Move  files  to  the  Site  Trash  moves  excess  files  to  the  Site  Trash 
folder  in  the  site  data  folder,  which  is  at  the  same  level  as  your 
site  folder. 

• The  Show  Warnings  checkbox  controls  the  dialog  box  that 
appears  when  you  select  the  Clean  Up  command.  Leave  this 
checkbox  selected  if  you  prefer  moving  unused  items  to  the 
Finder  Trash. 
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The  Preferences  - Site  - Export  Dialog  Box 


Choose  the  Site  - Export  group  of  options  to  edit 
the  site  export  preferences. 


The  Export  dialog  box  contains  a variety  of  options  that  influence  the 
way  Adobe  GoLive  assembles  your  material  when  you  use  the  option- 
al Export  Site...  command  from  the  Site  menu. 


The  Export  Site  Options  dialog  box  also  contains  these  options.  For  in- 
structions, please  refer  to  the  section  Exporting  Your  Site  on 
page  701. 
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The  Folder  Names 
Dialog  Box 


The  Preferences  - Site  - Folder  Names 
Dialog  Box 


Choose  the  Site  - Folder  Names  group  of  options 
to  edit  the  default  folder  names  used  by  Adobe 
GoLive  when  exporting  your  site. 


The  Folder  Names  dialog  box  lets  you  enter  custom  folder  names  that 
will  be  used  when  you  export  a site  with  Adobe  GoLive.  This  feature 
is  especially  useful  if  your  Internet  Service  Provider  specifies  a de- 
fault directory  structure  that  they  want  you  to  use  when  uploading 
your  site.  Additionally,  you  can  specify  the  filename  extension  and 
the  folder  name  for  new  pages  (=  generic  pages)  that  you  add  while 
working  in  the  Site  View. 


To  enter  custom  folder  names,  place  the  cursor  in  either  text  box  and 

enter  the  specified  folder  name: 

• Pages  is  the  default  folder  where  HTML  pages  go. 

• Media  is  the  default  folder  where  images  and  media  files  (such 
as  plug-ins)  go. 

• Files  not  in  project  is  the  default  folder  where  unreferenced  files 
go. 

• The  Extension  text  box  in  the  Generic  Pages  section  lets  you  spec- 
ify an  extension  for  new  pages  created  while  working  in  the  Site 
View.  The  default  extension  is  .html.  If  a DOS  or  Windows-based 
machine  will  serve  your  site,  enter  .htm  instead. 

• The  Folder  name  text  box  accepts  the  name  of  the  folder  where 
generic  pages  are  held  in  intermediate  storage  until  you  move 
them  to  the  folder  holding  your  HTML  pages. 


The  Page  Status  Dialog  Box 
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The  Page  Status 
Dialog  Box 

The  Preferences  - Site  - Page  Status 
Dialog  Box 


Choose  the  Site  - Page  Status  option  to  create  or 
edit  user-defined  statuses. 


3 


3 
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The  Page  Status  dialog  box  lets  the  user  define  publishing  status. 
Similar  to  Finder  labels,  these  indicators  can  be  selected  in  the  Page 
tab  of  the  File  Inspectorto  give  useful  hints  to  other  people  who  may 
have  to  maintain  or  edit  your  site. 


To  define  a new  status,  proceed  as  follows: 

1 Click  New  Status.  Place  the  cursor  in  the  text  box  below  the  Status 
list  box  and  type  a descriptive  text — for  example,  Web-ready. 

2 As  you  type,  the  list  adds  the  new  status. 

3 Click  the  color  field  next  to  the  text  box  and  select  a color  from 
the  Mac  OS  color  picker. 

To  edit  an  existing  status,  proceed  as  follows: 

1 Select  the  status  to  be  edited  in  the  Status  list  box  and  edit  it  in 
the  text  box. 

2 As  you  type,  the  status  will  change  in  the  list. 

3 Click  the  color  field  next  to  the  text  box  and  select  a new  color 
from  the  Mac  OS  color  picker. 

To  delete  an  existing  status,  proceed  as  follows: 

1 Select  the  status  to  be  deleted  in  the  Status  list  box. 

2 Click  the  Delete  button. 
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The  Site  View 
Dialog  Box 

The  Preferences  - Site  View  Dialog  Box 


Choose  the  Site  Colors  option  to  ed  it  the  set  of  col- 
ors used  in  the  Site  View. 


3 


The  Site  View  dialog  box  lets  you  specify  default  colors  for  items  dis- 
played in  the  Site  View.  The  choices  you  make  here  appear  in  the  Col- 
or Tab  of  the  Site  View  Controller  (see  page  671). 


To  set  default  colors  for  the  Site  View,  proceed  as  follows: 

1 Clicking  the  color  fields  in  the  Colors  for  new  Sites  section  opens 
the  color  wheel  to  let  you  select  a custom  color  for  the  current 
item. 

- Navigation  Curve  applies  to  the  arrows  representing  naviga- 
tional links. 

- Link  Curves  applies  to  arrows  representing  hyperlinks. 

Text  applies  to  file  names  or  page  titles  in  the  Site  View. 

- Background  sets  the  default  background  color  for  the  Site 
View. 

- Monochrome  Item  Color  sets  the  default  color  for  the  Mono- 
chrome display  option. 

2 After  you  select  options,  click  the  Apply  button  to  confirm  your 
changes. 

3 To  reset  the  display  colors  to  their  default  values,  click  the  De- 
fault Settings  button. 
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URL  Mappings  Adobe  GoLive’s  URL  Mappings  feature  lets  you  break  the  strict  “One 

Site,  One  Folder”  rule  imposed  on  site  management,  allowingyou  to 
work  with  Web  sites  that  are  distributed  over  several  folders  (and  dis- 
played in  multiple S/fe  Windows).  This  feature  gives  experienced  Web 
authors  the  flexibility  to  handle  complex  sites  that  reside  in  separate 
directories  on  the  Web  server  or  even  on  different  Web  servers. 

You  can  use  this  feature  in  two  ways: 

• Mapping  to  an  External  Folder:  Adobe  GoLive  translates  folder 
aliases  from  the  Macintosh  Finder  to  local  URLs,  mapping  inter- 
nal paths  from  the  site  folder  to  other  local  folders  on  your  hard 
disk.  Use  this  configuration  if  your  server  administrator  requires 
you  to  store  parts  of  your  site  in  a directory  separate  from  your 
main  site  folder. 

• Multiserver  Support:  The  URL  Mappings  feature  lets  you  create 
and  work  with  distributed  Web  sites  that  will  be  scattered  over 
several  servers  when  you  finally  publish  them  on  the  Web.  Use 
this  configuration  if  your  server  administrator  requires  you  to 
split  up  your  site  in  two  or  more  directories. 


Mapping  to  an 
External  Folder 


Similar  to  a folder  alias  in  the  Macintosh  Finder,  the  URL  Mappings 
feature  lets  you  work  with  resources  that  are  not  stored  in  the  site 
folder.  It  maps  internal  paths  from  the  site  folder  to  other  local  fold- 
ers on  your  hard  disk  or  any  other  mounted  volume. 

This  URL  mapping  mechanism  redirects  folder  paths,  thus  enabling 
Adobe  GoLive  to  reference  external  pages  and  images  as  if  they  were 
stored  in  the  site  folder.  You  can  link  to  those  pages,  images,  or  other 
resources  by  using  Point  & Shoot  between  two  Site  Windows  or  the 
Browse...  button  in  the  respective  Inspector.  With  the  appropriate 
folder  mappings  specified,  Adobe  GoLive  will  insert  the  correct  paths 
into  the  resulting  URLs  without  producing  error  messages. 


Coordinate  with  the  Web  server  administrator  to  make  sure 
that  the  mappings  you  specify  in  Adobe  GoLive  also  exist  on  the 
Web  server.  Special  rules  may  apply,  depending  on  the  operat- 
ing system  platform  and  Web  server  application. 


To  have  Adobe  GoLive  resolve  folder  paths  based  on  URL  mappings, 
proceed  as  follows: 

1 Choose  Preferences  from  the  Edit  menu,  then  click  the  Site  icon  in 
the  scrolling  side  bar  to  the  left. 
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2 Activate  the  Create  URL  mappings  for  a lias  folders  i n the  f i rst-level 
dialog  box  of  the  Site  Preferences. 

3 Switch  to  the  Finder  and  select  the  external  folder  you  want 
Adobe  GoLive  to  map  to  a selected  location  in  the  site  folder. 

4 Option-drag  the  folder  symbol  to  the  site  folder  for  which  you 
have  just  enabled  URL  mapping — for  example,  to  the  root  level. 
An  example  for  creating  an  alias  appears  below. 


Creating  an  Alias  for  URL  Mapping 


Alt-Option-drag  to  create  an  alias  in  the  site  folder  for 
which  you  want  to  enable  URL  Mapping. 
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5 Return  to  Adobe  GoLive  and  click  the  Update  button  in  the  Site 
Toolbar. 

6 A folder  alias  should  now  appear  in  the  file  list  in  the  left  pane  of 
the  Site  Window.  (You  may  have  to  navigate  to  the  folder  to  dis- 
play it  if  you  have  created  the  alias  in  a subfolder  of  the  site  fold- 
er.) This  alias  is  there  to  remind  you  that  URL  mapping  has  been 
enabled  for  the  current  site.  You  can  neither  open  that  folder  to 
perform  file  management  operations  nor  reference  any  items  in 
that  folder  using  Point  & Shoot. 

7 Choose  Site  Settings  from  the  Site  menu,  then  click  the  URL  Map- 
pings icon  in  the  side  bar  at  the  left  side  of  the  Site  Settings  dialog 
box  (see  below). 

The  URL  Mappings  View  of  the 
Site  Settings  Dialog  Box 


Click  this  icon  to  specify  new  URL  mappings. 


Use  this  option  to  specify  which  folder  within  your 
site  folder  should  be  mapped  to  a local  folder. 

Use  this  option  to  specify  the  folder  you  want  to 
map  to  the  site  folder. 


Use  these  buttons  to  add  and  delete  folder  map- 
pings. 
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The  Edit  URL  Dialog  Box 


8 You  will  find  that  Adobe  GoLive  has  already  created  a new  map- 
ping that  uses  the  paths  specified  by  the  alias  you  have  created 
in  step  4 above. 

9 You  can  now  edit  the  path,  if  desired: 

- The  popup  menu  next  to  either  text  box  allows  you  to  select 
the  root  directory. 

- You  can  avoid  thetedium  of  editing  long  path  namesdirectly 
in  the  Site  Settings  dialog  box  by  Option-clicking  either 
Browse. . . button.  This  opens  the  Edit  URL  window  shown  be- 
low, which  displays  the  full  path. 


10  Adobe  GoLive  will  now  correctly  map  the  URLs  of  any  items  you 
reference  in  the  external  folder  using  the  Browse...  button  in  the 
respective  Inspector  (or  Point  & Shoot  if  you  choose  to  create  a 
second  site  for  the  external  folder). 


To  specify  new  folder  mappings  without  using  an  alias,  proceed  as 

follows: 

1 Choose  Site  Settings  from  the  Site  menu,  then  click  the  URL  Map- 
pings  icon  in  the  side  baratthe  left  side  ot  the  Site  Settings  d\a\og 
box  (see  below). 

2 Click  New. 

3 Go  to  the  Map  local  folder  or  remote  server  option,  click  the 
Browse...  button,  then  locate  the  external  folder  in  the  subse- 
quent selection  dialog.  Click  the  Choose  button  to  confirm  your 
choice. 

Alternatively,  you  can  also  enter  the  path  to  the  local  folder. 

4 Go  to  the  With  local  folder  option,  click  the  Browse...  button, 
then  locate  the  folder  in  your  site  in  the  subsequent  file  selection 
dialog.  Click  the  Choose  button  to  confirm  your  choice. 

5 Click  OK.  Click  the  Update  button  in  the  Toolbar  to  have  Adobe 
GoLive  update  the  Site  Window. 
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Multiserver  Support  Adobe  GoLive’s  URL  mapping  feature  offers  the  possibility  to  edit  a 

Web  site  whose  contents  will  be  distributed  over  several  servers 
when  you  finally  publish  it  on  the  Web.  While  you  edit  the  site  on 
your  local  hard  disk,  you  will  work  with  two  site  documents.  With 
URL  mapping  enabled  and  correctly  set  up,  Adobe  GoLive  will  use  lo- 
cal paths  to  facilitate  editing  and  automatically  replace  the  local 
paths  with  the  correct  server  URLs  when  you  export  your  site. 


Setting  Up  a Distributed  Web  Site 


You  need  to  create  a new  site  folder  for  each  server  that  hosts  your 

site,  then  assign  a server  URL  to  each  folder.  Files  that  a specific  serv- 
er should  host  belong  in  the  folder  with  the  appropriate  server  ad- 
dress. 

To  set  up  a distributed  Web  site,  proceed  as  follows: 

1 Use  the  New  Site...  command  (any  option  is  possible)  to  create  as 
many  site  documents  and  folders  as  you  need. 

2 Rename  the  index.html  pages  in  the  second,  third  and  further 
Site  Windows  to  avoid  duplicate  filenames.  Do  not  change  the 
index.html  filename  of  the  homepage  that  will  be  the  point  of 
entry  to  your  site  (unless  your  ISP  asks  you  to  do  so). 

3 Add  pages  and  hyperlinks  to  all  parts  of  your  site. 

4 Make  the  site  document  for  the  first  part  of  your  site  the  active 
window. 

5 Click  the  Site  Settings  button  to  open  the  Site  Settings  dialog  box. 

6 Click  New  to  create  a new  folder/server  pair. 

7 Enter  the  URL  for  the  current  part  of  your  site  in  the  Map  local 
folder  or  remote  server  text  box  and  save  the  site  document. 

8 Click  the  Browse...  button  next  to  the  With  local  folder  text  box 
and  locate  the  site  folder  on  your  hard  disk  you  want  to  map  to 
the  URL  entered  in  step  7 above. 

9 Repeat  steps  4 through  8 for  all  remaining  site  documents. 

10  Test  view  your  pages  using  your  favorite  browser.  When  you 
move  the  cursor  over  any  hyperlink  that  references  a page  in  an- 
other part  of  the  site  (that  is,  in  another  folder),  you  will  notice 
that  it  contains  the  local  path  to  that  page. 

11  Export  your  site  using  the  Export  Site...  command  from  the  Site 
menu  on  all  site  folders. 

12  Test  view  any  page  one  more  time  in  the  browser.  When  you 
move  the  cursor  over  a hyperlink  that  references  a page  in  anoth- 
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er  part  of  the  site  (that  is,  in  another  exported  folder),  you  will  no- 
tice that  it  contains  the  full  URL  to  that  page. 

(Do  not  click  the  link  at  this  time.  This  will  result  in  an  error  mes- 
sage because  the  exported  version  of  the  site  contains  real-life 
Web  addresses,  not  local  folder  and  file  paths.) 

13  Adobe  GoLive  has  automatically  rewritten  all  links  and  file  refer- 
ences, based  on  the  server  mapping  preferences  you  specified 
when  creating  the  site.  All  parts  of  your  site  are  ready  for  upload- 
ing now. 


While  editing  a distributed  Web  site,  be  sure  to  deactivate  the 
Files  and  External  References  checkboxes  in  the  Rescan  root  folder 
group  of  options  in  the  Clear  Site  Options  dialog  box  (see 
page  642).  If  activated,  these  checkboxes  cause  all  external  files 
to  be  copied  into  the  current  site  folder  when  you  choose  the 
Clear  Site  command  from  the  Site  menu,  thus  destroying  the 
structure  of  your  distributed  site. 


Setting  Up  Adobe 
GoLive  to  Use 
Absolute  Paths 


General 

Adobe  GoLive  lets  the  author  decide  whether  the  path  specifications 
within  URLs  that  reference  other  items  in  subfolders  of  the  site  folder 
should  be  relative  or  absolute.  This  feature  has  been  introduced  to 
accommodate  applications  in  which  path  specifications  must  be  rel- 
ative to  the  root  folder  of  the  site.  It  also  enables  Adobe  GoLive  to  im- 
port sites  that  use  absolute  URLs  without  producing  multiple  error 
messages. 

Absolute  paths  are  recommended  in  the  following  cases: 

• If  a form  references  a CGI  script  at  the  root  level  of  the  site  direc- 
tory (or  any  other  subdirectory),  it  is  good  practice  to  keep  any 
reference  to  that  file  absolute. 

• If  a common  navigation  bar  is  used  on  many  pages  that  reside 
in  folders  at  various  hierarchy  levels,  you  can  use  a uniform  path 
specification  throughout  to  reference  its  image  file. 

Example:  The  page /root/pages/info/page.htmi  contains  the  image/ 
root/images/image.gif  where  “root”  is  the  name  of  the  site  folder  you 
specify  when  you  save  the  site  for  the  first  time. 

By  default,  the  URL  in  the  referencing  HTML  page  isn’t  “aware”  of  the 
presence  of  the  root  folder.  This  is  reflected  by  the  “up  one  folder 
level“notation.  It  consists  of  two  periods,  followed  by  a slash  (../). 
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If  you  let  Adobe  GoLive  default  to  relative  paths,  the  path  specifica- 
tion reads: 

../../images/image,  gif 

This  instructs  the  browser  to  go  up  two  folder  levels  and  locate  the 
image  file  in  the  folder  images. 

If  you  set  up  Adobe  GoLive  to  use  absolute  paths,  it  omits  the  “up  one 
folder  level”  notation.  This  works  only  when  the  site  is  served  by  a 
Web  server  application,  because  the  browser  depends  on  the  root  di- 
rectory information  supplied  by  the  server. 

The  absolute  path  specification  would  read: 

/images/image.gif 

This  instructs  the  browser  to  locate  the  image  file  in  the  subfolder 
images  within  the  root  folder  specified  by  the  Web  server. 

The  major  drawback  of  using  absolute  paths  is  that  it  limits 
your  previewing  options.  The  pages  aren’t  displayed  properly 
when  you  choose  Adobe  GoLwe’s  Show  In  Browser  command  to 
launch  a Web  browser  for  previewing.  The  browser  reads  the 
pages  directly  from  the  hard  disk,  would  need  a Web  server  ap- 
plication to  supply  it  with  information  on  the  root  directory 
and  assist  it  in  resolving  the  URLs. 

Specifying  Absolute  Paths  for  Referenced  Files 

Adobe  GoLive  gives  you  two  options  for  using  absolute  paths.  First, 
you  can  go  to  the  Preferences  and  enable  absolute  paths  for  any  new 
link  or  file  reference  you  create  throughout  the  application.  Or,  you 
can  the  absolute  path  option  individually  for  the  current  link  or  file 
reference. 

The  following  screenshot  illustrates  how  you  change  the  reference  to 
an  image  selected  in  the  document  window. 
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Specifying  an  Absolute  URL  For  a 
Referenced  File 


Select  this  option  to  change  the  relative  URL  into  an 
absolute  URL. 


As  soon  as  you  click  the  Absolute  checkbox,  the  “up  one  level”  nota- 
tions disappear  from  the  Source  text  box.  The  reference  to  the  image 
file  is  now  absolute. 


The  Absolute  checkbox  is  disabled  when  you  select  an  URL 
pointing  at  an  external  destination  or  an  item  that  maintains  a 
link  across  volumes. 
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The  following  screenshot  shows  how  you  change  Adobe  GoLive’s  de- 
fault setting  in  the  Preferences  - URL  Handling  dialog  box. 


The  Preferences  - General  - URL  Handling 
Dialog  Box 


Select  this  option  to  have  Adobe  GoLive  default  to 
absolute  URLs  for  each  new  link  you  create. 
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Part  29  — Using 


Updating  Version  2.0 
Project  Files 


\dobe  GoLive  Project  Files 


The  Site  Module  in  Adobe  GoLive  represents  a significant  redesign 
and  enhancement  to  the  previous  Project  Module  in  version  2.0.  Con- 
sequently, you  must  update  existing  project  files  for  use  in  Adobe 
GoLive  4.0  before  being  able  to  continue  working  with  your  new  Web 
site  structure.  Sites  created  in  Adobe  GoLive  4.0  are  not  backward 
compatible  - but  fear  not,  a backup  copy  of  the  original  version  2.0 
Project  file  will  be  saved  (“projectnameTt.old”). 

The  site  structure  of  Adobe  GoLive  4.0  requires  one  root  folder  (with 
an  unlimited  number  of  subfolders)  to  contain  all  files..  In  contrast, 
a version  2.0  Project  may  contain  aliases  to  files  which  can  be  any- 
where on  your  harddisk(s).  For  such  Projects,  the  “publish  site”  fea- 
ture of  version  2.0  has  to  be  used  before  uploading  the  site  to  a 
server. 

If  you  did  not  use  the  “publish  site”  feature  before  uploading  files  to 
a serve,  your  version  2.0  Project  already  has  the  structure  required 
for  Adobe  GoLive  4.0.  In  this  case  an  automatic  Update  can  be  per- 
formed. Just  follow  the  instructions  under  “Updating  version  2.0 
Project  Files”. 

If  you  did  use  “publish  site”  before  uploading,  you  need  to  import 
the  site.  Please  follow  the  instructions  under  “importing  version  2.0 
Project  Files”. 


Follow  these  steps: 

Launch  Adobe  GoLive  and  select  “Open...”  from  the  File  menu;  pick 
the  Project  file  for  your  site. 


S Edit  Style  Format 

New 

SN 

New  Site... 

^*N 

Import  Site  Folder. 

New  Special 

► 

Open  Recent  Files 

T ► 

Close 
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Adobe  GoLive  will  alert  you  that  the  Project  needs  to  be  updated  to 
the  new  Site  Structure.  Hit  the  Update...  button  to  continue.  (Note: 
a backup  copy  of  the  original  Project  file  will  be  saved.) 


The  Project  needs  to  be  updated  to  the  new 
Site  structure.  A backup  copy  of  the  original 
Project  file  will  be  saved. 


You  will  then  be  asked  to  select  the  root  folder  of  your  Project  and 
homepage.  To  minimize  errors,  please  make  sure  the  site  folder  con- 
tains all  the  referenced  files  for  your  Web  site. 

To  continue,  press  the  Update  button  in  the  Site  Toolbar. 


Update  Project 


Please  select  the  root  folder  of  your  project. 


Cj  I /GoLiveVolume /Desktop  Folder/ 


Please  select  the  Home  Page  of  your  project. 


Q 


| Brovse...  | 


| Broysf.Tl 


Cancel  J jf  Update 


Your  complete  Web  site  will  then  be  successfully  imported  and  the 
new  Site  Window  will  appear  with  the  Files  tab  presently  active  and 
displaying  the  contents  of  your  site  directory.  Your  selected  homep- 
age should  also  appear  in  boldface  type. 

Note:  In  this  way,  all  non-file  items,  such  as  URLs,  mailtos,  colors, 
and  fontsets,  now  are  part  of  the  newly  created  Site  Window. 

If  any  referenced  files  were  located  outside  of  the  root  folder,  errors 
may  appear  in  the  Site  Window. 
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Importing  Version  2.0 
Project  Files 


To  import  any  version  2.0  project  file,  if  you  normally  publish  your 
site  using  Adobe  GoLive,  proceed  as  follows: 

1 Launch  the  version  2.0  application. 

2 Ifyou  have  not  already  done  so,  publish  yoursite  usingany  ofthe 
three  available  site  structure  options: 

Flat 

- Separate  Pages  and  Media  (recommended) 

- As  in  Project 

3 Quit  the  version  2.0  application  and  note  the  location  of  your 
newly  published  site  directory. 

4 Launch  Adobe  GoLive  4.0  and  select  Import  from  Folder. . . from 
the  File  menu. 


5  The  Import  Site  Folder  dialog  will  appear.  Click  the  Browse. . . but- 
ton to  select  the  folder  of  the  just  published  site 
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6 Select  the  homepage  for  your  site  from  your  newly  published  site 
directory. 


Select  the  home  page  of  the  site  to  import: 


| Ca  CS  2 Project  f $| 

GoLiveVolu... 

Pi  page  l.html 

a. 

Eject 

Pi  page  2.html 

( Desktop  | 

Cancel 

V 

Ik  Open 

Once  you  have  selected  your  homepage  from  the  newly  published 
directory,  both  fields  will  contain  a directory  path  to  the  correct  files. 
To  continue,  press  the  Import  button  in  Import  Site  Folder  dialog. 

The  files  will  be  updated  and  the  new  Site  Window  will  appear  with 
the  Files  tab  presently  active  and  displaying  the  contents  of  your  site 
directory.  Your  selected  homepage  should  also  appear  in  boldface 
type. 


□ 

= = 

CS2  Project! 

Files  ^ Site  ] Q 

External 

| O Colors  ^ A Fontsets 

ram 

DLJ  > 

w 

L 

Name 

Status 

_L 

URL 

_ 

L 

L. 

^7 

/AdobeVolume  /Deski 

- 

Q 1 46_4.GIF 

✓ 

/AdobeVolume  /Deskt 

0- 

1- 

@ l56pers_1e.JPG 

✓ 

/AdobeVolume  /Deskt 

Li- 

P 156_4b.GIF 

V 

/AdobeVolume  /Deskt 

B spid7.JPG 

■s 

/AdobeVolume  /Deskt 

£ 

"x 

B spi_2.JPG 

✓ 

/ AdobeVolume  /Deskt 

n 

page  1 .html 

V 

/AdobeVolume  /Des 

EL 

page  2.html 

V 

/AdobeVolume  /Deskt 

* 

8 items 
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You  have  now  successfully  imported  your  Project  files. 

To  import  any  external  URLs,  mailto:  addresses,  colors,  or  fontsets 
used  for  this  site,  you  have  the  option  to  import  the  project  file  (pro- 
jectname.7i).(The  External  tab  must  be  active.)  Select  Import  File... 
from  the  Site  menu. 


Select  your  project  file  and  Adobe  GoLive  will  add  it  to  your  Site  Win- 
dow. 


New  Special 
Open... 

Open  Recent  Files 


Chapter  18 


General 


The  Web  Database 

This  chapter  describes  the  Web  Database,  Adobe  GoLive’s 
comprehensive  knowledge  base  for  any  type  of  source 
code  used  in  HTML  pages. 


The  Web  Database  is  a basic  building  block  that  helps  maintain  the 
integrity  of  your  HTML  code.  It  comes  with  a complete  inventory  of 
HTMLtags,  special  character  codes,  and  browser-specific  style  sheets 
that  ensure  correct  usage  within  any  file  written  and  read  by  the  ap- 
plication. The  Web  Database  also  serves  as  a reference,  assisting  Web 
authors  in  choosing  the  proper  tags  and  attributes  for  the  content  of 
their  pages.  Tags  and  attributes  can  be  inserted  via  drag  & drop  from 
the  Web  Database  into  the  Source  Editor  window. 

When  you  install  the  full  version  of  Adobe  GoLive,  the  Web  Database 
has  five  tabs: 

• The  Global  tab  contains  options  that  control  the  internal  format- 
ting of  the  source  code. 

• The  HTML  tab  holds  Adobe  GoLive’s  complete  inventory  of  HTML 
tags,  covering  the  full  scope  of  HTML  3.2  and  a subset  of  the 
emerging  HTML  4.0  standard. 

• The  Chars  tab  includes  all  special  characters  specified  by  ISO 
8859-1  and  the  HTML  3.2  standard,  enabling  Adobe  GoLive  to 
map  user-entered  special  characters  to  the  proper  Web-specific 
character  codes. 

• The  CSS  tab  offers  specific  style  sheets  for  all  popular  browsers 
on  the  major  platforms.  You  can  choose  any  style  sheet  to  serve 
as  the  root  style  sheet  for  designing  pages. 

• The  WebObjects  tab  contains  the  entire  scope  of  WebObjects-spe- 
cific  tags  that  Adobe  GoLive  supports.  This  tab  is  not  available 
when  you  disable  or  choose  not  to  install  the  WebObjects  mod- 
ule. 

You  can  edit  all  tabs  of  the  Web  Database  to  accommodate  future 
tags  as  they  emerge  on  the  Web  scene.  This  feature  is  mission-critical 
for  any  Web  author  who  wants  to  keep  up  with  the  latest  develop- 
ments in  HTML  technology. 

Chapter  17  describes  four  of  the  five  tabs  of  the  Web  Database  win- 
dow. Fora  discussion  of  the  WebObjects  tab,  see  the  separate  manual 
Using  WebObjects  with  Adobe  GoLive  supplied  with  Adobe  GoLive. 
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Things  to  Remember 
When  Editingthe  Web 
Database 


Adding  new  tags,  attributes,  enums,  or  other  items  to  the  Web  Data- 
base doesn’t  automatically  enhance  Adobe  GoLive’s  functionality  or 
add  any  icons  to  the  Palette.  To  add  any  new  tags,  you  must  hand- 
codethem  in  the  Source  Ed itor  or  select  them  from  the  popup  menus 
in  the  Outline  Editor.  Note  that  adding  custom  HTML  elements  will 
cause  the  Syntax  Checker  in  the  Source  Editor  to  accept  them  as  cor- 
rect HTML,  so  be  sure  that  your  entries  represent  correct  HTML. 

When  you’ve  made  an  error  while  editingthe  Web  Database,  you  can 
always  restore  the  Web  Database  to  its  original  content. 

To  restore  the  original  Web  Database,  proceed  as  follows: 

1 Quit  Adobe  GoLive. 

2 Go  to  the  Modules  folder  in  the  Adobe  GoLive  program  folder  and 
locate  the  Web  Database  document. 

3 Drag  the  Web  Database  document  to  the  Finder  Trash. 

4 Re-launch  Adobe  GoLive.  This  will  create  a new  Web  Database 
document  with  the  original  content,  as  shipped.  Any  edits  you 
have  made  will  be  lost. 


Do  not  edit  the  Web  Database  unless  you  are  absolutely  sure 
what  you’re  doing.  Serious  damage  to  your  files  may  result. 


The  Global  Tab  The  Global  tab  of  the  Web  Database  window  controls  the  general 

HTML  syntax  rules,  inluding  options  such  as  automatic  text  wrap- 
ping, indentation,  and  lowercase/uppercase  usage.  An  extra  “Dirty 
HTML”  option  allows  HTML-savvy  authors  to  use  style  tags  that  span 
entire  paragraphs  and  blocks. 

Any  change  you  make  to  the  HITML  formatting  preferences  appears 
immediately  in  the  preview  pane  at  the  bottom  of  the  window. 
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The  Global  Tab  of  the  Web  Database 


Use  these  options  to  control  text  wrapping  and 
indentation  in  the  HTML  source  code. 


Use  these  options  to  specify  general  HTML 
syntax  rules. 


Click  here  to  open  the  preview  pane. 


□ 


Web  Database  = = 


SB 


mr 


TeT 


Characters 


Style  Sheets 


□ Break  text 
Indent  with 

Line  break  character 
Tag  case 
Attribute  case 
Quote  attribute  values 
Color  name  translation 


E 


[ Macintosh  (CR) 


f Lover  Case 


Always 


H 


I I Alignment  local  in  paragraphs 

I I Styles  can  contain  blocks 

This  will  produce  non  proper  HTML. 
Parsing  may  be  slowed  down. 


— ^ Source  Sample 


Use  the  options  on  the  Global  tab  as  follows: 

• Choose  the  Web  Database  command  from  the  Special  menu. 

• Click  the  Break  Text  checkbox  and  enter  a number  in  the  associ- 
ated text  box  to  control  the  wrapping  of  the  HTML  code  dis- 
played in  Source  mode. 

• Enter  a number  in  the  Indent  with  text  box  and  choose  Tabs 
(default)  or  Spaces  from  the  associated  popup  menu  to  control 
the  indentation  of  lower-level  tags  displayed  in  Source  mode. 

• If  you  know  the  system  platform  of  your  Web  server,  choose  an 
option  from  the  Line  break  character  popup  menu  to  specify  the 
way  line  breaks  are  written  to  file: 

Macintosh  (CR;  default)  inserts  a carriage  return  character 
only. 

Unix  (LF)  inserts  a line  feed  character  only. 

- Windows  (CR/LF)  inserts  a carriage  return  and  line  feed  char- 
acter combination. 

• Choose  an  option  from  the  Tag  Case  popup  menu  to  specify  the 
way  HTML  tags  are  written  to  file: 

- Upper  Case  (default)  uses  uppercase  only  in  tag  names,  as  in 
<HTML>. 

- Lower  Case  uses  lowercase  only  in  tag  names,  as  in  <html>. 

- Capital  capitalizes  the  first  letter  of  the  tag  name,  as  in 
<Html>. 

- Database  driven  writes  the  tag  as  specified  in  the  Web  Data- 
base. 
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Except  numbers 
_Onlyjfnecessary_ 


Choose  an  option  from  the  Attribute  Case  popup  menu  to  specify 
the  way  HTML  tag  attributes  are  written  to  file: 

- Upper  Case  (default)  uses  capital  letters  only  in  attribute 
names,  as  in  <WIDTH>. 

- Lower  Case  uses  lowercase  letters  only  in  attribute  names,  as 
in  <width>. 

- Capital  capitalizes  the  first  letter  of  the  attribute  name,  as  in 
<Width>. 

- Database  driven  writes  the  attribute  as  specified  in  the  Web 
Database. 

Pick  an  option  from  the  Quote  attribute  values  popup  menu  to 
determine  whether  the  values  you  specify  for  HTML  tag 
attributes  should  be  enclosed  in  straight  quotes: 

- Always  (default)  quotes  attribute  values  by  default,  as  in 
<IMG  SRC="./image/advertise.gif">. 

- Except  numbers  quotes  all  attribute  values,  except  for  numer- 
als. In  <IMG  SRC="./image/advertise.gif">  the  value  is  en- 
closed in  quotes,  while  in  <hr  width=580>  it  is  not. 

- Only  if  necessary  quotes  attribute  values  only  if  there  is  a risk 
of  ambiguity. 

Choose  an  option  from  the  Color  name  translation  popup  menu 
to  determine  whether  color  names  should  be  translated  to  mne- 
monics: 

- Do  not  (default)  uses  hexadecimal  RGB  values  only,  such  as 
"#000000"  for  "Black". 

76  basics  translates  the  RGB  values  of  the  16  basic  colors 
("#000000"  through  "#FFFFFF")  to  mnemonics  ("Black" 
through  "White"). 

- Netscape’s  translates  the  RGB  values  of  colors  to  Netscape- 
specific  mnemonics  like  "LavenderBlush",  provided  there  is 
an  equivalent. 

Select  the  Alignment  local  in  paragraphs  checkbox  to  have  Adobe 
GoLive  enclose  subsequent  paragraphs  with  a center  attribute  in 
a <CENTER>  tag. 

This  checkbox  is  enabled  only  if  all  document  windows  are 
closed. 

Enable  the  Styles  can  contain  Blocks  option  if  you  want  Adobe 
GoLive  to  enclose  contiguous  paragraphs  or  blocks  of  code  with 
identical  formatting  in  a single  tag  instead  of  assigning  the  tag 
to  each  single  block.  For  example,  if  the  same  font  set  is 
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assigned  to  successive  blocks,  this  option  causes  Adobe  GoLive  to 
write  a <FONT>...</FONT>  tag  that  spans  those  blocks. 


This  option  creates  “dirty"  FITML,  that  is,  code  that  isn’t  one 
hundred  percent  “by  the  book”.  It  is  supported  by  most  brows- 
ers, but  we  recommend  to  test-view  this  streamlined  code  on 
all  popular  browsers. 


The  HTML  Tab  The  HTML  tab  is  the  heart  of  the  Web  Database.  It  contains  the  entire 

scope  of  HTML  tags  that  Adobe  GoLive  can  read,  display,  and  write, 
sorted  in  functional  categories  such  as  Master  Containers  Forms,  and 
Frames. 


The  HTML  Tab  of  the  Web  Database 


Choose  a tag  from  the  list  to  view  its  properties. 

Tags  are  grouped  in  expandable  sections,  accord- 
ing to  their  function. 


Any  changes  you  make  are  immediately  displayed 
in  the  preview  pane. 


The  Web  Database  holds  the  complete  set  of  HTML  tags,  as  known  to 
Adobe  Systems,  Inc.  atthetimeof  publication. The  built-in  HTMLtag 
inventory  encompasses  both  HTML-standard  and  browser-specific 
tags,  including  valid  attributes,  the  type  of  value  each  attribute  sup- 
ports, and  comments  identifying  the  function  of  each  tag  within  an 
HTML  document.  HTML-standard  tags  include  all  the  tags  specified 
bythe  HTML2.0and  3.2  standard  publications,  plus  some  new  HTML 
4.0  forms  tags.  Non-standard  tags  used  to  implement  browser-spe- 
cific features  are  also  covered,  such  as  the  marquee  tag  for  Microsoft 
Internet  Explorer. 
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If  you  are  keeping  track  of  HTML  on  your  own,  you  may  choose  to 
add  new  tags  to  the  database  as  they  become  available. 

The  tag  database  assists  authors  directly,  allowing  them  to  pop  up 
tag  and  attribute  lists  from  the  database  when  defining  a newly  in- 
serted tag  element.  (See  Defining  Tag  Types  on  page  518  for  refer- 
ence.) 

In  addition,  authors  can  open  the  database  at  any  time  and  look  up 
tags  as  in  a reference  book  if  they  have  any  doubts  about  the  proper 
use  of  a tag  and  its  attributes. 


Looking  Up  HTML  Tags  in  If  you  have  any  doubts  about  the  proper  usage  of  a tag  and  its  at- 

the  Web  Database  tributes,  open  the  Web  Database  window  from  within  any  of  Adobe 

GoLive’s  modes  and  look  up  tag  and  attribute  definitions. 


To  open  the  Web  Database  window  and  look  up  definitions,  proceed 
as  follows: 

1 Choose  Web  Database  from  the  Special  menu  to  open  the  Web 
Database  window. 

2 Click  the  HTML  tab  rider. 

3 Scroll  through  the  list  box  in  the  HTML  tab  to  expand  categories 
to  locate  the  tag  you  are  looking  for. 


The  WebDB  Tag  Inspector 


The  tag  name  appears  here. 

This  field  contains  a description. 


This  popup  menu  identifies  the  structure  of  the 
tag  (container  tag,  inline  tag,  etc.). 

This  popup  menu  indicates  how  the  content  of  a 
container  tag  is  arranged  in  source  code. 

This  popup  menu  shows  whether  the  end  tag  is 
required  or  optional. 


4  Select  a tag  from  the  list  box  and  view  structural  information  in 
the  WebDB  Tag  Inspector: 

- The  Comment  text  box  identifies  the  function  of  the  tag  with- 
in an  HTML  document. 

- The  Structure  popup  menu  displaysstructural  information  on 
the  tag.  For  example,  Inline  Invisible  indicates  that  the  tag  en- 


The  HTML  Tab 


735 


closes  visible  content  but  doesn’t  display  as  a visible  element 
in  the  browser.  (For  more  details,  please  refer  to  page  739.) 

- The  Content  popup  menu  indicates  how  the  Source  mode  ar- 
ranges the  content  of  a container  tag — including  inline  tags, 
attributes,  and  visible  content.  For  example,  normal  indicates 
that  the  content  of  a container  tag  is  structured  using  line 
breaks,  tabs,  and  spaces. 

- The  End  fog  popup  menu  tells  you  whether  or  not  the  tag  you 
are  viewing  requires  an  end  tag. 

5 Expand  the  tag  by  clicking  the  small  triangle  control  next  to  it. 

(This  control  doesn’t  appear  if  the  tag  can’t  have  any  attributes.) 

6 Select  an  attribute  listed  below  the  tag  and  view  its  options  in  the 

WebDB  Attribute  Inspector. 


The  WebDB  Attribute  Inspector 


The  attribute  name  appears  here. 
This  field  contains  a description. 


This  text  box  shows  the  default  value  of  the 
attribute. 

This  popup  menu  shows  whethertheattribute  is 
required  or  optional. 

This  popup  menu  identifies  the  type  of  value  the 
attribute  supports. 


The  following  information  is  provided  for  attributes: 

- The  Default  text  box  shows  the  default  value  used  for  the  at- 
tribute. 

- The  Attribute  is  popup  menu  tells  you  whether  the  attribute 
is  required  or  optional. 

- The  Value  type  popup  menu  identifies  the  format  of  the  at- 
tribute, such  as  Text,  URL,  or  other. 

7  Some  attributes  expand  to  show  their  enum  properties,  which 
represent  a fixed  set  of  values  an  attribute  can  assume,  such  as 
Get  and  Post  for  the  Method  attribute  of  the  Form  tag.  If  Adobe 
GoLive  provides  native  support  for  a particular  tag,  these  values 
display  as  menu  options  in  the  respective  inspectors. 
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8 Click  the  Version  tab  rider  to  look  up  information  on  compatibil- 
ity with  a browser  or  HTML  version.  The  Version  tab  rider  appears 
in  the  section  Specifying  Browser  Compatibility  on  page  740. 


Editing  HTML  Tags  in  the  Editing  tags  in  the  Web  Database  is  simple  and  straightforward.  The 
Web  Database  context-sensitive  toolbar  turns  into  the  Web  Database  Toolbar  when 

the  HTML  tab  of  the  Web  Database  window  is  activated.  This  toolbar, 
shown  below,  provides  shortcut  buttons  to  let  you  add  new  or  dupli- 
cate sections,  tags,  attributes,  and  enum  properties. 


The  Web  Database  Toolbar 

This  button  inserts  a new  category. 

This  button  inserts  a new  tag. 

This  button  inserts  a new  attribute. 

This  button  inserts  a new  enum  option. 
This  button  inserts  a new  special  character. 
This  button  duplicates  a selected  item. 


Equivalent  editing  commands  appear  in  the  Special  menu,  under  the 
second  Web  Database  item.  The  Special  menu  with  its  Web  Database 
submenu  is  shown  below. 


The  Web  Database  Command  in  the 
Special  Menu 


Special 


New  Link 
Remove  Link 
Rdd  to  Keywords 
Start  Tabulator  Indexing 

&L 

X&L 

&K 

xarr 

Show  in  Default  Browser 

Show  in  Browser 

9§T 

► 

UJeb  Database... 

Web  Database 

► 

New  Section 

Check  Syntax 

New  Tag  [\ 

New  Attribute 

New  Enum 

New  HTML  Tag 
New  HTML  Text 
New  HTML  Comment 

OS€K 

036  1 

osec 

New  Character 

New  HTML  Attribute 

osefl 

Import... 

Toggle  Binary 

^3€B 

1 

Edit  WebObjects  Source 
Tollapse  Rll  Containers 
^nd  P taine* 


Do  not  edit  any  existing  tags  in  the  Web  Database  unless  you 
are  absolutely  sure  what  you’re  doing.  Serious  damage  to  your 
files  may  result. 

Also,  before  you  add  new  items  to  the  Web  Database,  be  sure  to 
check  with  the  World  Wide  Web  Consortium’s  (W3C)  Web  site  at 
http://www.w3c.org  to  avoid  using  unsupported  tags  in  your 
pages. 
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Adding  Items 


The  Web  Database  window  provides  a convenient  editing  environ- 
ment for  adding,  updating,  or  removing  tags,  attributes,  and  their 
properties. 


To  add  an  item  to  the  Web  Database,  proceed  as  follows: 

1 Select  an  item  in  the  list  box,  depending  on  what  you  want  to 

add: 

- To  add  a new  section,  select  a section  or  a tag. 

- To  add  a new  tag,  pick  the  section  you  want  to  add  the  tag  to 
or  an  existing  tag  in  that  section. 

- To  add  a new  attribute,  choose  the  tag  you  want  to  add  the 
attribute  to  or  an  existing  attribute  listed  below  that  tag. 

- To  add  a new  enum  option,  select  the  attribute  you  want  to 
add  the  option  to  or  an  existing  enum  listed  below  that  at- 
tribute. 

2 Click  the  respective  button  in  the  Web  Database  toolbar. 

- The  New  Section  button  C§]  adds  a new  category  named  Un- 
titled Section  to  the  list  box. 

- The  New  Tas  button  l~»1  adds  a tag  named  Untitled  Tagtothe 
current  section. 

- The  New  Attribute  button  [ED  adds  an  attribute  named  Unti- 
tled Attribute  to  the  current  tag. 

- The  New  Enumeration  button  C*D  adds  an  option  list  named 
Untitled  Enum  to  the  current  attribute. 

3 With  the  new  item  selected,  go  to  the  respective  Inspector  win- 
dow and  edit  the  properties. 
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Editing  a New  Section 


The  Web  DB  Section  Inspector 


If  you  add  a new  section,  you  must  name  it  in  the  WebDB  Section  In- 
spector and  describe  its  contents. 


To  edit  section  information,  proceed  as  follows: 

1 Enter  a descriptive  name  in  the  Name  text  box  and  press  the  Re- 
turn key. 

2 Enter  a description  in  the  Comment  text  box  and  press  the  Return 
key. 

3 Add  new  tags  to  the  section,  as  outlined  above. 


Editing  Tag  Basics 


The  Basic  Tab  of  the  Web  DB  Tag 
Inspector 

Enter  the  tag  name  here. 

Enter  a description  here. 


Use  this  popup  menu  to  choose  a structure  option 
for  the  tag. 

Use  this  popup  menu  to  control  the  wrapping  of 
the  source  code  wraps  before  and  after  that  tag. 


If  you  add  a new  tag,  you  must  name  it  in  the  Basic  tab  of  the  WebDB 
Tag  Inspector,  describe  its  function,  and  set  various  options  relating 
to  its  structure  and  content. 


□ : 

' Basic 

- Tag  Name 
_ Comment 


Structure 
Content 
End  Tag 


WebDB  Tag  Inspector 

Output  "j  Version  ^ 


form 


Defines  a fill-in  form. 


( Inline  Invisible 

±1 

f normal 

*1 

I Attribute 


B 


3 


r 


Use  this  popup  menu  to  specify  whether  the  end 
tag  is  required  or  optional. 
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Block 

Inline  Visible 

Inline  Container 
Inline  Killer 


None 


Required r-. 


Optional  (do  not  write)  ^ 
Optional  (write) 


To  edit  basic  tag  information,  proceed  as  follows: 

1 Enter  the  tag  name  without  the  enclosing  “greater  than”  and  “less 
than”  characters  in  the  Name  text  box  and  press  the  Return  key. 

2 Enter  a description  in  the  Comment  text  box  and  press  the  Return 
key. 

3 Choose  a tag  structure  option  from  the  Structure  popup  menu: 

- Block  creates  a block-level  container  element  that  can  con- 
tain other  elements,  such  as  the  <BODY>  tag. 

- Inline  Visible  creates  an  element  that  has  visible  HTML  con- 
tent and  can  only  occur  within  a container  element,  such  as 
the  <IMG>  tag. 

- Inline  Invisible  creates  an  element  can  only  occur  within  a 
container  element,  has  visible  HTML  content,  but  isn’t  visible 
itself  (although  it  influences  a visual  property  of  the  HTML 
content),  such  as  the  <BOLD>  tag. 

- Inline  Container  creates  a container  element  that  can  only  oc- 
cur within  another  container  element  and  can  have  both 
non-HTML  content  as  well  as  visible  HTML  content,  such  as 
the  <APPLET>  tag. 

- Inline  Killer  is  reserved  for  use  with  the  <BR>  tag. 

4 Pick  an  option  from  the  Content  popup  menu  to  determine  how 
to  handle  the  content  of  a tag  when  Adobe  GoLive  reads  or  writes 
an  HTML  page: 

- Normal  (default)  instructs  Adobe  GoLive  to  handle  the  con- 
tent as  specified  for  the  structure  option  selected  in  the  Struc- 
ture menu. 

- Get  All  Spaces  instructs  Adobe  GoLive  to  read  that  tag  without 
eliminating  extra  whitespace.  For  example,  this  option  allows 
Adobe  GoLive  to  display  spaces  in  a <PRE>  tag. 

- Core  Text  takes  the  entire  content  of  a tag  for  granted  without 
adding  or  deleting  any  elements.  For  example,  this  option 
lets  Adobe  GoLive  read  and  write  the  non-HTML  information 
contained  in  a <STYLE>  tag  or  protect  database  calls  en- 
closed in  a custom  <NOEDIT>  tag. 

5 Choose  an  option  from  the  End  Tag  popup  menu  to  specify 
whether  or  not  the  tag  requires  an  end  tag: 

- Required  specifies  that  the  tag  needs  an  end  tag  and  that 
Adobe  GoLive  is  supposed  to  read  and  write  it. 
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Optional  (do  not  write)  indicates  that  the  tag  does  not  neces- 
sarily need  an  end  tag  and  that  Adobe  GoLive  is  not  supposed 
to  read  or  write  one. 

Optional  (write)  indicates  that  the  tag  does  not  necessarily 
need  an  end  tag  but  that  you  want  Adobe  GoLive  to  add  it. 


Controlling  Tag  Spacing  in  the  Source  Code 


For  any  tag  within  the  Web  Database,  you  can  control  some  basic  for- 
matting options  in  the  Output  tab  of  the  WebDB  Tag  Inspector. 


The  Output  Tab  of  the  WebDB  Tag 
Inspector 


Use  this  menu  to  control  the  spacing  above  and 
below  the  tag. 

Use  this  menu  to  control  the  spacing  inside  of  the 
tag. 

Select  this  option  to  structure  your  code. 

Preview  your  changes  here. 


• None 


Small 


Medium 
Large 
X Large 


Before  start 
Behind  end 


To  set  the  basic  formatting  for  the  current  tag,  proceed  as  follows: 

1 Choose  an  option  from  the  Outside  popup  menu  to  control  the 
vertical  spacing  between  the  tag  itself  and  other  elements  above 
and  below  it. 

2 Pick  an  option  from  the  Inside  popup  menu  to  control  the  verti- 
cal spacing  between  the  start  and  end  tags  and  its  content. 

3 Select  the  Indent  content  checkbox  to  indent  the  content  of  the 
tag. 

4 Preview  your  changes  in  the  preview  pane  of  the  Output  tab  of 
the  WebDB  Tag  Inspector. 


Specifying  Browser  Compatibility 

For  any  tag  within  the  Web  Database,  the  Version  tab  of  the  WebDB 
Tag  Inspector  lets  you  specify  a browser  or  HTML  version  and  allow 
custom  attributes. 
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The  browser  compatibility  settings  you  make  for  a particular  tag  de- 
termine what  happens  when  you  choose  an  option  from  the  browser 
compatibility  menu  in  the  Source  Editor  and  launch  syntax  checking 
(see  page  533  in  Chapter  13,  Using  the  Source  Editor). 


The  Version  Tab  of  the  Web  DB  Tag 
Inspector 


Select  an  option  to  specify  browser  compatibility. 


Select  this  checkbox  to  allow  custom  attributes. 


□ WebDB  Tag  Inspector 

^ Basic  ^ Output  f Version  ^ 


□ 

Adobe  GoLive 

a. 

□ 

^ Explorer  2.x 

□ 

Explorer  3.x 

□ 

43  Explorer  4.x 

-0 

Hjgt  HTML  2.0 

□ 

Egf  HTML  3.2 

□ 

■■  HTML  4.0 

□ 

J3  Navigator  2.x 

n 

'W 

Li 

-FI  Can  have  any  attribute 


To  specify  a browser  or  HTML  version,  proceed 

1 Locate  the  browser  or  HTML  version  in  the 
the  checkbox  next  to  it. 


as  follows: 

Version  tab  and  click 


2 Select  the  Can  have  any  attribute  checkbox  to  allow  attributes 
other  than  those  the  Web  Database  specifies. 
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Editing  a New  Attribute 


If  you  add  a new  attribute  to  a tag,  you  must  name  it  in  the  Basic  tab 
of  the  Web  DB  Attribute  Inspector,  describe  its  function,  and  set  its  re- 
quired status  as  well  as  options  relating  to  values. 


The  Basic  Tab  of  the  WebDB  Attribute 
Inspector 

Enter  the  attribute  name  here. 

Enter  a description  here. 


Use  this  popup  menu  to  specify  whether  the  at- 
tribute is  required  or  optional. 

Use  this  text  box  and  popup  menu  to  specify  the 
type  of  the  attribute. 

Use  these  options  to  have  Adobe  GoLive  include 
the  attribute  (and  a default  value)  in  the  source 
code  that  is  inserted  via  drag  & drop. 


WebDB  Attribute  Inspector 


Basic  ) Version  ^ 


Attr  Name 
Comment 


Name  of  the  CGI  script 


Attribute  is  ( optional 
Value  type  [ URL 


0 Create  this  attribute 
Value  | method 


]© 


To  edit  the  attribute  information,  proceed  as  follows: 

1  Enter  the  attribute  name  in  the  Name  text  box  and  press  the  Re- 
turn key. 


• optional 


required 

[^alternate 


5 


2 Enter  a description  in  the  Comment  text  box  and  press  the  Return 
key. 

3 Enter  a default  value  in  the  Default  text  box. 

4 Choose  an  option  from  the  Attribute  is  popup  menu  to  specify 
whether  the  attribute  is  required  or  optional: 

- Optional  indicates  that  the  attribute  is  necessary  for  the 
browser  to  interpret  the  tag  correctly. 

- Required  specifies  that  the  attribute  must  be  used  in  order  for 
the  browser  to  interpret  the  tag  correctly. 

- Alternate  indicates  that  both  attribute  statuses  are  accepted. 
Adobe  GoLive’s  syntax  checker  won’t  mark  the  tag  as  faulty  if 
the  attribute  is  not  there. 


5  The  two  options  at  the  bottom  of  the  tab  let  enable  drag  & drop 
insertion  for  the  current  attribute  and  attach  a default  value: 


Create  Attribute  causes  Adobe  GoLive  to  insert  the  attribute 
into  the  source  code  when  the  user  drags  its  parent  tag  from 
the  Web  Database  into  the  Source  Editor  or  selects  it  from  the 
Outline  Editor’s  popup  menus. 
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None 

Text 

Encoded  Text 
Number 


- Default  lets  you  specify  a default  value  the  attribute  should 
have  when  its  parent  tag  is  inserted  into  the  source  code. 

6 Choose  an  option  from  the  Value  Type  popup  menu  to  specify 
what  kind  of  value  the  attribute  can  have: 

Text  allows  any  Western-encoded  alphanumerical  character 
string.  Use  this  option  if  you  are  not  sure  about  the  usage. 

- Encoded  Text  allows  any  alphanumerical  character  string  in 
any  encoding. 

- Number  allows  a numerical  value  only. 

- Enumeration  allows  multiple  options.  Use  this  option  if  you 
want  to  add  an  enum  option  to  the  attribute. 

- Color  permits  an  RGB  color  code  only. 

- URL  allows  a Universal  Resource  Locator  only. 

- JavaScript  allows  JavaScript  code  only. 

7 Click  the  Version  tab  rider  and  specify  compatibility  with  a brows- 
er or  HTML  version,  as  outlined  in  the  section  Specifying  Browser 
Compatibility  starting  on  page  740. 


Editing  a New  Enumeration 


If  you  add  a new  enumeration  option  list  to  an  attribute,  you  must 
name  each  item  in  the  Basic  tab  of  the  WebDB  Enum  Inspector  and 
describe  its  function. 


The  Basic  Tab  of  the  WebDB  Enum 
Inspector 

Enter  the  enum  name  here. 

Enter  a description  here. 


To  edit  an  enum  option,  proceed  as  follows: 

1 Enter  the  enum  name  in  the  Enum  Name  text  box  and  press  the 
Return  key.  The  name  you  specify  here  is  one  of  the  values  the 
attribute  can  assume. 
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2 Enter  a description  in  the  Comment  text  box  and  press  Return. 

3 Click  the  Version  tab  rider  and  specify  compatibility  with  a brows- 
er or  HTML  version,  as  outlined  in  the  section  Specifying  Browser 
Compatibility  earlier  in  this  chapter. 

4 Add  more  enum  options  and  name  them.  All  enums  you  specify 
for  a particular  attribute  appear  in  the  Default  popup  menu  in 
the  Basic  tab  of  the  WebDB  Attribute  Inspector. 


Duplicating  and  Deleting  Items 

You  can  create  new  items  in  the  Web  Database  by  duplicating  and 

editing,  and  you  can  delete  entries: 

• To  duplicate  an  item,  select  it  and  click  the  Duplicate  button  C+J 
in  the  toolbar  or  choose  Duplicate  Item  from  the  Edit  menu. 

• To  delete  an  item,  select  it  and  press  the  Backspace  key  or 
choose  Clear  from  the  Edit  menu.  When  prompted  to  confirm 
that  the  item  should  be  removed,  click  OK. 


Additionally,  drag  & drop  support  allows  you  to  insert  from  the 
Web  Database  directly  into  the  Source  Editor. 


The  Chars  Tab  HTML  uses  a specific  notation  for  encoding  special  characters  to  en- 

sure a uniform  display  across  multiple  computer  platforms.  The 
Chars  tab  includes  those  special  characters,  as  specified  by  ISO  8859- 
1 and  the  HTML  3.2  standard.  Adobe  GoLive  uses  the  content  of  the 
Chars  tab  to  map  special  characters  you  enter  on  the  Macintosh  key- 
board to  the  proper  Web-specific  character  codes. 

The  special  characters  in  the  Web  DatabaseiaW  into  three  categories: 

• Basics  contains  often  used  special  characters,  such  as  quote, 
ampersand,  “greater  than,”  and  “less  than.” 

• Characters  lists  the  entire  set  of  Western-language  characters. 

• General  punctuation  includes  variants  of  spaces  and  dashes. 

Each  character  appears  with  its  HTML  name,  visual  image,  Macintosh 
and  ISO  codes,  and  a textual  description. 
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The  Chars  Tab  of  the  Web  Database 
Window 


Each  character  is  displayed  with  detailed  informa- 
tion. 

Special  characters  are  listed  in  three  sections. 


If  a character  appears  as  a small  box  in  the  Char  column  of  the  Char- 
acters tab,  this  indicates  that  it  can’t  be  displayed  in  the  system  font 

(Geneva  or  other).  If  this  is  the  case,  proceed  as  follows: 

1 Select  any  character  and  go  to  the  WebDB  Character  Inspector  (see 
below). 

2 Locate  the  fonts  popup  menu  next  to  the  preview  pane  at  the 
bottom  of  the  Inspector  window. 

3 Select  a different  font. 

4 If  the  character  is  known  on  the  Macintosh,  it  should  display 
properly  now  in  the  Chars  column. 


Viewing  Special  Similar  to  the  HTML  tags  stored  in  the  Web  Database,  you  can  view 

Characters  the  entries  in  the  Chars  tab  using  a dedicated  Inspector. 

To  view  special  characters,  proceed  as  follows: 

1 Choose  Web  Database  from  the  Special  menu  to  open  the  Web 
Database  window. 

2 Click  the  desired  item  in  the  list  box. 

3 If  you  click  a special  character,  the  WebDB  Character  Inspector  ap- 
pears in  the  Inspector  window  so  you  can  view  the  following 
properties: 

- Name  shows  the  HTML  name  of  the  character  and  the  corre- 
sponding HTML  code  that  Adobe  GoLive  inserts  in  your  Web 
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page  when  you  type  a special  character  on  the  keyboard  of 
your  Macintosh. 

Comment  includes  the  long  name  of  the  character  and  a de- 
scription. 

ISO  Code  displays  both  the  ISO-standard  mnemonic  code  and 
byte  code  of  the  character. 

Mac  shows  the  mnemonic  code  and  byte  code  of  the  charac- 
ter (as  used  by  the  Mac  OS  Encodings  system),  plus  its  visual 
presentation. 

The  preview  pane  at  the  bottom  of  the  Inspector  lets  you  view 
a magnified  image  of  the  character. 


The  Basic  Tab  of  the  WebDB  Character 
Inspector 

The  HTML  name  and  code  appear  here. 

The  long  name  and  a description  appear  here. 


This  text  box  shows  the  ISO  and  byte  codes. 

This  checkbox  and  its  associated  text  boxes  iden- 
tify the  Macintosh  mnemonic  and  byte  codes. 


A preview  of  the  character  appears  here. 


D 

WebDB  Character  Inspector 

a 

f"  Basic  j 

Version  "'j 

Name 

Comment 

ISO  Code 
-0  Mac 


&aacute : 


a,  acute  accent 


a 


The  fonts  popup  menu  lets  you 
select  a display  font  for  the  Web 
Database  window. 


Adding  and  Editing  You  can  append  new  special  characters  by  clicking  a button  in  the 

Special  Characters  toolbar  and  editing  their  names  and  byte  codes. 

Before  you  add  a new  character,  there  are  a few  things  you  need  to 

know  about  special  characters  in  general: 

• New  characters  must  be  W3C-specified  characters  that  the 
browser  makers  support. 

• The  Macintosh  doesn’t  display  some  characters  that  display  on 
other  platforms,  so  you  may  have  to  launch  the  browser  to  pre- 
view them  when  used  in  a document. 

• Macintosh-only  characters  can  be  added,  but  they  won’t  display 
in  browsers. 
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The  Web  Database  Toolbar 

This  button  inserts  a new  category. 
This  button  inserts  a new  character. 
This  button  duplicates  a selected  item. 


The  context-sensitive  toolbar  turns  into  the  Web  Database  Character 
Toolbar  when  the  Chars  tab  of  the  Web  Database  is  activated.  This 
toolbar  provides  shortcut  buttons  to  let  you  add  new  or  duplicate 
characters.  The  Character  Toolbar  is  shown  below. 


□ 

JSQ  IGELJGD  Ci 

pG 

p 

zr 

Equivalent  editingcommandsappear  in  the  Special  menu,  underthe 
second  Web  Database  item.  The  Special  menu  with  its  Web  Database 
submenu  is  shown  on  page  736. 

To  add  a special  character  to  the  Web  Database,  proceed  as  follows: 

1 Select  a section  or  an  existing  special  character  in  the  section  you 
want  to  add  a character  to. 

2 Click  the  New  Character  button  H on  the  Toolbar. 

3 An  Untitled  Chare ntry  appears  in  the  current  section. 

4 With  the  new  character  selected,  go  to  the  WebDB  Character  In- 
spector window  and  edit  its  properties: 

Enter  the  HTML  name  of  the  new  character  in  the  left  Name 
text  box. 

Enter  the  HTML  code  of  the  new  character  in  the  right  Name 
text  box,  enclosing  it  in  a leading  ampersand  and  a trailing 
semicolon. 

Enter  a description  in  the  Comment  text  box. 

Enter  the  ISO  mnemonic  code  and  its  equivalent  byte  code  in 
the  ISO  Code  text  boxes. 

If  there  is  a Macintosh  equivalent,  select  the  Mac  checkbox 
and  enter  the  mnemonic  code  and  its  equivalent  byte  code  in 
the  Mac  text  boxes.  If  the  character  exists  on  the  Macintosh, 
you  can  preview  it  in  the  preview  pane  now. 

5 Click  the  Version  tab  rider  and  specify  compatibility  with  a brows- 
er or  HTML  version,  as  outlined  in  the  section  Specifying  Browser 
Compatibility  earlier  in  this  chapter. 
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The  CSS  Tab  The  CSS  tab  of  the  Web  Database  contains  default  style  sheets  for  all 

major  browsers  on  the  Windows  and  Macintosh  platforms.  These 
style  sheets  are  primarily  used  for  previewing  pages  with  the  Layout 
View  Controller.  (See  Previewing  with  Cascading  Style  Sheets  on 
page  350.)  They  let  you  simulate  how  fonts  and  other  design  ele- 
ments d isplay  on  Windowsand  Macintosh  platforms,  demonstrating, 
for  example,  how  font  sizes  grow  when  pages  are  displayed  on  a Win- 
dows-based browser.  The  default  style  sheets  contain  styles  with  tag 
selectors  only  because  styles  need  to  be  applied  automatically  for 
this  purpose. 


The  CSS  Tab  of  the  Web  Database 


Use  this  option  to  toggle  style  sheets  on  and  off. 


Choose  a default  unit  from  this  popup  menu. 


Use  these  options  to  control  the  formatting  of  the 
stylesheet  in  source  code. 

Default  style  sheets  for  all  major  browsers  are  list- 
ed here. 

Default  styles  are  not  editable. 


Observe  the  style  sheet  in  the  preview  pane  while 
choosing  options  from  the  Output  menu. 


□ 

Web  Database 

0B 

u 

Global  ] [<3  HTML  ] {a\  Chars  [ [ij  CSS  ) VebObjocts  ] 

| Root  | 


-0  Use  Stylesheets 


Default  Unit 


Output 


Compact 


: u 


0 Indent 


[ypj  Adobe  GoLive 
m Navigator  3 (Mac) 
m Navigator  4 (Mac) 
^ Navigator  4 (Win) 
Explorer  4 (Mac) 
j0‘  Explorer  4 (Win) 


a :active 


a :visited 

address 

b 

big 

blink 

blockquote 

body 

caption 

center 


8 

© 

© 

© 

© 

a 


® 

o 

o 

o 

o 

o 


■j)  Source  Sample 


Further  options  include  an  on/off  radio  buttons  for  style  sheets,  a de- 
fault unit  popup  menu,  and  a popup  menu  that  controls  how  the 
Source  mode  formats  style  sheets. 

You  can  also  duplicate  an  item  and  edit  it  to  create  a user-defined 
style  sheet  in  the  Root  menu  of  the  Layout  View  Controller. 
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Making  General  Settings 


Pretty  1 
Pretty  2 
Pretty  3 

Nice 


To  make  general  settings  relating  to  Cascading  Style  Sheets,  proceed 

as  follows: 

1 If  desired,  deselect  the  Use  Style  Sheets  checkbox  to  turn  style 
sheets  off  throughout  the  application. 

2 Select  an  option  from  the  Default  Unit  popup  menu  to  determine 
the  default  unit  that  the  various  menus  of  the  CSS  Selector  Inspec- 
tor will  use. 

3 Select  an  option  from  the  Output  popup  menu  to  determine  how 
style  sheets  are  formatted  in  the  source  code.  The  options  in  this 
menu  vary  the  horizontal  and  vertical  spacing  between  selectors 
and  rules.  Experiment  with  them  and  observe  the  preview  pane 
at  the  bottom  of  the  window  to  find  out  which  option  best  suits 
your  personal  viewing  preferences. 


Inspecting  the  Default  Style  Sheets 


The  default  style  sheets  in  the  CSS  tab  of  the  Web  Database  are  write- 
protected.  You  can  only  inspect  their  properties. 


To  inspect  the  default  style  sheets  in  the  CSS  tab,  proceed  as  follows: 

1  Select  a style  sheet  from  the  list  to  display  the  CSS  Stylesheet  In- 
spector in  the  Inspector  window. 


The  CSS  Tab  of  the  CSS  Stylesheet 
Inspector 

The  style  sheet’s  name  appears  here. 
This  field  contains  a description. 


This  box  shows  the  icon  of  the  target  application. 


This  text  box  shows  the  typical  screen  resolution 
of  the  hardware  platform. 

This  checkbox  indicates  that  the  target  applica- 
tion can  display  stylesheet  formatting  (disabled 
with  write  protected  style  sheet). 


2 View  its  properties  in  the  Basic  tab  of  the  CSS  Stylesheet  Inspector, 
such  as  name,  description,  application  icon,  screen  resolution  of 
underlying  hardware  platform,  and  Can  handle  Style  Sheets  sta- 
tus. 

3 Switch  to  the  Source  tab  to  view  the  source  code. 
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The  Source  Tab  of  the  CSS  Stylesheet 
Inspector 


This  list  shows  the  CSS  source  code,  complete 
with  selectors  and  rules. 


Viewing  Styles  and  Properties 


You  can  view  styles  and  their  properties  in  the  CSS  Selector  Inspector. 
To  view  styles  and  properties,  proceed  as  follows: 

1  Expand  a default  style  sheet  by  clicking  the  triangle  control  to  its 
left. 


The  Property  Viewer  Tab  of  the  CSS 
Selector  Inspector 

This  text  box  contains  the  tag  selector. 

This  list  box  shows  the  style  rules  specified  for  a 
particular  tag  selector. 


2  Locate  the  desired  style  in  the  list  and  select  it  to  display  the  CSS 
Selector  Inspector  in  the  Inspector  window. 


3  View  the  style’s  rules  in  the  Property  Viewer  tab  of  the  CSS  Selector 
Inspector. 


The  CSS  Tab 
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Creating  a User-Defined  Default  Style  Sheet 


You  can  create  a new  default  stylesheet  if  you  want  more  previewing 

options  in  the  Layout  View  Controller.  The  Stylesheet  Toolbar  (see 

page  338)  will  help  you  create  a style  sheet. 

To  create  a new  default  stylesheet,  proceed  as  follows: 

1 Select  the  default  style  sheet  that  meets  your  requirements  as 
closely  as  possible. 

2 Click  the  Duplicate  button  jjinthe  Stylesheet  Toolbar.  Duplicat- 
ing a style  sheet  creates  an  exact  copy,  complete  with  all  styles 
and  properties. 

3 A new  style  sheet  appears  at  the  bottom  of  the  list. 

4 Go  to  the  CSS  Stylesheet  Inspector  and  enter  a name  in  the  Name 
text  box,  a screen  resolution  (96  is  typical  for  Windows,  72  for 
Macintosh)  in  the  DPI  text  box,  and  select  the  Can  handle  style 
sheets  checkbox. 

5 The  new  style  sheet  is  fully  editable,  allowing  you  to  add  tag  se- 
lectors and  rules  exactly  as  outlined  in  Chapter  6,  Cascading  Style 
Sheets. 

6 When  you  finish  editing  the  new  stylesheet,  save  your  changes  to 
the  Web  Database. 

7 Go  to  the  document  window,  click  the  “eye”  button  ® to  open 
the  Layout  View  Controller,  then  select  the  new  style  sheet  from 
the  Root  menu  to  find  out  how  it  changes  the  appearance  of  your 
pages. 

Alternatively,  you  can  also  select  the  style  sheet  by  clicking  the  Root 

radio  button  next  to  the  style  sheet  entry  in  the  CSS  tab. 


Chapter  19  Web  Technology 

Support 

This  chapter  explains  how  Adobe  GoLive  supports  Web 
authors  in  handling  foreign  code  in  Web  pages. 

General  Adobe  GoLive  provides  basic  viewing  and  editing  support  for  various 

emerging  Web  technologies,  including  Extensible  Markup  Language 
(XML)  and  Microsoft’s  Active  Server  Pages. 

Adobe  GoLive  preserves  hidden  non-HTML  code  no  matter  where  it 
is  found,  including  special  locationssuch  as  the  space  before  the  first 
opening  <HTML>  tag  or  between  table  cells. 

Adobe  GoLive  and  XML  Adobe  GoLive  recognizes  XML,  the  simplified  dialect  of  SGML  (Stan- 
dard Generalized  Markup  Language)  for  the  structured  presentation 
of  information  on  the  World  Wide  Web.  Adobe  GoLive  reads  XML 
markup,  writes  it  back  to  file  without  any  changes,  and  lets  you  in- 
spect and  edit  existing  XML  declarations  and  tags.  Due  to  the  nature 
of  XML,  a visual  editor  is  not  available. 

XML  is  a subset  of  SGML  for  defining  custom  markup  languages.  XML 
documents  use  Document  Type  Definitions  (DTDs)  that  define  the 
custom  tags  available  for  use  in  the  document.  Adobe  GoLive  does 
not  validate  (syntax  check)  XML  files.  For  more  information  on  XML, 
visit  the  following  Web  site: 

http://www. w3.org/XML/ or  http://www.xml.com/ 

With  Adobe  GoLive,  the  user  can  open  existing  XML  documents  either 
by  using  the  Open  command  from  the  File  menu,  by  double-clicking 
the  XML  file,  or  by  drag  and  dropping  the  file  onto  the  Adobe  GoLive 
application.  The  Outline  Editor  is  the  suggested  way  of  viewing  and 
editing  XML  tags. 
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XML  Tags  in  Outline  View 


Adobe  GoLive’s  Layout  view  shows  the  XML  document  in  a collapsed 
formatwith  theXMLstructure  being  represented  by  box  symbols  (see 
below).  Clicking  the  collapse/expand  triangle  control  on  the  left  side 
of  a box  expands  or  collapses  the  element,  showing  or  hiding  nested 
elements.  Elements  can  be  edited  in  the  Inspector  after  clicking  the 
pen  symbol  IE|  in  the  upper  right  corner  of  the  document  window. 


XML  Document  in  Layout  View 


Box  symbols  representing  XML  structure. 


The  triangle  control  expands  or  collapses  element 
views. 


Adobe  GoLivejcml 


ED  E 


Layout  □]  E]  Source  I T |"|  psl*] 


□ ) El 


> 0 


<3>  □ li 


-foreign 
foreign  | 

© 

'j<compiled> 
t>  <title> 


<settings> 

^ < vers  ion  > 
t>  [<var> 

^ <var> 

|>  |<var> 


>|<style> 


General 


757 


XML  Document  in  Source  View 


Adobe  GoLive  and  ASP 


You  can  also  switch  to  source  view  and  edit  the  XML  markup  as  text. 


Layout  □ I (B  ( Source  [t])  [=]]  Preview  □ 1 EH ) \£. 

> i II  Netscape  & IE...  £ 1 1 •#  | 0 |&|o  A I «c  1 S’ 1 W 1 1 P ||  III  J 

<?xml  version®" 1.0"  encoding®"  ISO-8859- 1"?><  IDXTVPE  compiled  SYSTEM  "Compiled  DTD.dtd"><!— 

File  compiled  and  written  Ued,  Dec  2,  1998,  0:21:03 
by  Adobe  GoLive. 

<c>  1998  by  Adobe  Systems  Inc. 

<compi led> 

title:  Root  StyleSheet  < /ti  tle> 

settings: ' version  valve®"  1"  key®" smiths">< /vers i on > <var  name® "browser"  spec="CyberStudio"> 
</var><var  name=“main"  dpi="72"  css="level1"  cssp="yes“></var><var  name="edit"  level="original“> 
< /var></settings> 

<style  type®" text /css"  level®" 1"> 

a { color:  blue;  text-decoration:  underline  } 

a: active  { color:  red  > 

a: visited  { color:  purple  } 

address  { font-style:  italic  } 

b { font-weight:  bold  } 

big  { font-size:  1 . 17em  } 

blink  { > x 

blockquote  { margin:  lem  40px  } 
body  { } 

caption  { text-align:  center  } 
center  { text-align:  center  } 
cite  { font-style:  italic  } 

code  { font-size:  cs-pref;  font- family:  monospace  } 
dd  { > 

8 HI  " ‘ l> 

Adobe  GoLive  lets  XML  developers  modify  the  text  of  existing  XML 
documents.  Other  than  the  changes  you  make,  Adobe  GoLive  will 
write  the  balance  of  the  document  without  modifying  the  code. 
(Adobe  GoLive  may  modify  white  space.) 

You  can  view  Adobe  GoLive’s  new  structure  by  looking  in  your  Adobe 
GoLive’s  Modules  folder  at  the  WebDatabase  folder.  You  can  inspect 
the  various  files  by  opening  and  viewing  them  in  Outline,  Layout, 
and  Source  views.  Successfully  modifying  these  files  requires  expert- 
level  knowledge  of  XML.  If  you  decide  to  experiment,  make  a copy  of 
the  WebDatabase  fo\der  before  starting.  You  can  also  reinstall  Adobe 
GoLive  to  restore  the  original  files. 


Adobe  GoLive  is  an  ASP-friendly  application.  It  reads  ASP  code, 
writes  it  back  to  file  without  any  changes,  and  lets  you  inspect  and 
edit  existing  code,  including  JScript,  VBScript,  Visual  Basic  for  Appli- 
cations, and  other  proprietary  languages  that  give  Web  authors  en- 
hanced control  over  Microsoft  Internet  Explorer. 


758 


CHAPTER  19 


Visual  Indicators  for 
Foreign  Code 


Foreign  Items  in  the  Head  Section 


This  Foreign  Item  indicator  tells  you  that  the  head 
section  contains  non-HTML  code. 


Inspecting  XML  Code  with  the 
Foreign  Item  Inspector 

Clicking  a foreign  item  indicator  displays  the  un- 
derlying code  in  the  Foreign  Item  Inspector. 


Web  Technology  Support 


Adobe  GoLive  has  special  indicators  for  non-HTML  code.  These  vary 
depending  on  where  in  the  page  the  code  appears. 

Foreign  Code  in  the  Head  Section 

Each  line  of  foreign  code  found  in  the  head  section,  such  as  an  XML 
declaration,  generates  a Foreign  Item  in  the  head  section  of  the  doc- 
ument window. 


^chapter  action  > der>  0f  F 


You  can  click  on  the  foreign  item  indicator  and  then  inspect  and  edit 
its  foreign  source  code. 

The  following  screenshot  shows  the  new  Foreign  Item  Inspector  that 
appears  when  you  click  a non-HTML  item  in  the  head  section. 


You  can  edit  the  code  i n the  text  box  of  the  Foreign  Item  Inspector  and 
save  it  to  disk.  This  same  Inspector  also  lets  you  view  and  edit  code 
between  table  cells,  as  explained  below. 

When  you  edit  non-HTML  code,  be  sure  to  know  what  you  are 
doing.  You  should  be  familiar  with  the  specific  syntax  and  the 
requirements  that  led  to  the  insertion  of  that  code,  otherwise 
serious  damage  may  result  to  your  pages 


General 
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XML  Markup  in  the  Document  Window 


This  “unknown”  tag  indicates  the  presence  of  non- 
HTML  code. 


The  Hidden  Tab  of  the  Table  Inspector 


Hidden-HTML  code  between  table  cells  is  indicat- 
ed by  blue  dots. 


3 


Foreign  Code  in  the  Body  Section 

Non-HTML  code,  such  as  XML  markup,  found  between  HTML  tags  is 
indicated  by  the  unknown  tag  symbol  that  experienced  Adobe 
GoLive  users  will  recognize  from  earlier  versions.  An  example  ap- 


pears  below. 

Layout  fTI  I fH  I Source  Pfl  1 Hilt 

Preview  [Tj  1 LR  1 

> 0 XML  Tryout 

<bodyte» ' XML  lags  m the  body  section  display  as  unknown  tags . </bodytext> 


You  can  click  unknown  tag  symbols  and  inspect  them  in  the  Tag  In- 
spector. 

Foreign  Code  in  Tables 

Non-HTML  code  situated  between  table  cells  can  be  found  using  the 
new  Hidden  tab  of  the  Table  Inspector  (see  below). 


To  find  foreign  code  in  tables,  proceed  as  follows: 

1 Select  the  table  by  clicking  at  its  top. 

2 In  the  Table  Inspector,  select  the  Hidden  tab.  You  will  see  an  out- 
line view  of  the  table,  with  small  blue  dots  between  the  table 
cells.  These  dots  indicate  that  there  is  hidden-HTML  or  non- 
HTML-code. 
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3 Click  any  blue  dot.  In  the  document  window,  the  table  is  reduced 
to  a simple  contour  with  one  or  more  unknown  tag  symbols  in  it, 
as  shown  in  the  example  below. 


A Table  Contour  with  a Foreign  Item  in 
the  Document  Window 


In  contour  view,  non-HTML  code  items  appear  as 
unknown  tags. 


n 


4 Click  on  the  foreign  item  to  display  its  content  in  the  Foreign  Item 
Inspector  shown  on  the  preceding  page.  You  can  now  edit  the 
code  and  save  it  to  disk,  if  desired. 

If  you  want  to  remove  existing  blue  dots,  press  the  Delete  key. 


Appendix  A Shortcuts 


Thefollowingtable  lists  various  special  shortcuts  you  may  find  useful 
when  working  with  Adobe  GoLive. 

Layout 


9t  + 

$ = ^3 

option  | + 

* 

D&D 

control  | + 

* 

I* 

■ 

_dL±JLJ 

option  | + 

a 

♦"If  * 1 * 1 

Command-dragging  from  selected 
text  or  any  object  creates  a new  link 
to  a destination  in  the  Site  Window  or 
another  document  window. 

Option-clicking  with  subsequent 
drag  & drop  copies  text  and  links 
within  a page. 

Control-clicking  a link  jumps  to  the 
link’s  destination.  The  cursor  as- 
sumes the  shape  of  a hand. 

The  cursor  control  keys  move  a se- 
lected item  across  the  layout  grid, 
stopping  before  the  item  being 
moved  can  overlap  other  items. 

(You  can  select  most  items  by  clicking 
at  the  top.) 

While  the  Option-Key  is  pressed,  the 
cursor  control  keys  move  the  selected 
item  across  the  layout  grid  one  pixel 
at  a time. 


✓ 


Clicking  a color  field  in  an  Inspector 
window  brings  the  Color  Palette  to 
the  front.  Dragging  a color  from  the 
Color  Palette  and  dropping  it  onto 
the  color  field  colors  the  object  asso- 
ciated with  the  Inspector. 

Moving  the  mouse  cursor  over  the 
color  swatches  in  the  Color  Palette 
turns  the  cursor  into  a pipette.  Drag- 
ging the  pipette  over  the  screen  ex- 
tracts the  color  below  the  current 
cursor  position. 

To  create  a hyperlink  via  Point  & 
Shoot,  drag  from  the  Point  & Shoot 
button  in  the  Inspector  to  the  desired 
object  in  the  Site  Window  and  release 
the  mouse  button  when  the  object 
highlights. 

To  select  an  image  via  Point  & Shoot, 
drag  from  the  Point  & Shoot  button 
in  the  Basic  tab  of  the  Image  Inspec- 
tor to  the  desired  image  in  the  Site 
Window  and  release  the  mouse  but- 
ton when  the  item  highlights. 

To  select  a page  you  want  to  appear 
in  a frame,  Command-drag  from  the 
frame  to  the  desired  page  in  the  Site 
Window  and  release  the  mouse  but- 
ton when  the  item  highlights. 
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Text 


option 

+ 

Moves  the  cursor  to  the  next  word  to 
the  left  or  right. 

Moves  the  cursor  to  the  beginning  or 
end  of  the  current  line. 

l€ 

+ 

Ldo,Li 

Extends  or  reduces  the  current  selec- 
tion. 

shift 

3 

Ld-bJ 

shift 

3 

return 

Insertsa  <BR>  line  break  instead  of  a 
<P>  tag. 

Control-Dash  generates  a <WBR> 
word  breaktag,enablingthe  browser 
to  hyphenate  the  word  at  the  point  of 

control 

+ 

Ld 

insertion. 

Generates  a list  item  without  a bullet 
or  number. 

option 

1* 

return 

Generates  a list  item  with  extra  wide 
line  spacing. 

It 

+ 

1 return 

Site  Window 

Command-dickingan  item  intheSite 
Window  shows  the  file  in  the  Finder. 

It 

+ 

* 

Control-clicking  an  item  in  the  Site 
Window  shows  the  Finder  Info  win- 
dow. 

control 

+ 

* 

Site  View 

Control-Clicking  zooms  into  the  Site 
View. 

control 

+ 

* 

Control  -Option-Clicking  zooms  out 
of  the  Site  View. 

control 

+ 

option  | + 

^1 

Command-dragging  between  two 
pages  in  the  Site  View  creates  a ge- 

It 

b 

0 

Option-dragging  from  a page  in  the 
Site  View  creates  a generic  page  that 
is  linked  to  the  first  page. 

Option-dragging  duplicates  a select- 
ed object. 

option 

i* 

0 

Document 

option 

i* 

0 

D 

Selects  the  Don’t  save  button  when 
closing  a window. 

It 

+ 
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Timeline 


I 

j«- 


Deletes  selected  keyframe. 


The  right,  left,  up,  and  down  cursor 
keys  select  the  next,  first,  and  previ- 
ous keyframe. 


o 


Enter  plays  a scene  beginning  at  the 
current  time  cursor  location. 


0 (numerical  keypad)  stops  scene 
playback. 


*l  + 

* 

option  ] + 

It  + 

i 

option  ] + 

ft 

control  ] + 

Table 

*l  + 

0 

control  1 + 

0 

Command-clicking  a time  track  cre- 
ates a new  keyframe. 


Option-dragging  duplicates  a key- 
frame. 


Command-clicking  the  Actions  Track 
creates  an  action  placeholder. 


Option-clicking  an  action  on  the  Ac- 
tions Track  duplicates  the  action. 


Backspace  deletes  the  selected  ac- 
tion. 


Control-dragging  the  keyframe  fur- 
thest to  the  right  scales  the  anima- 
tion while  maintaining  the  relative 
time  positions  of  all  keyframes  on  the 
same  time  track. 


Command-dragging  adds  cells  and 
rows  to  a table. 


Control-dragging  resizes  the  table  in- 
teractively, showing  its  content. 


The  Asterisk  key  on  the  numeric  key- 
pad adds  a column  at  the  current  in- 
sertion point. 


The  Plus  key  on  the  numeric  keypad 
adds  a row  below  the  current  row. 


The  Delete  key  deletes  the  current 
column. 


shift  | 


Shift-Delete  deletes  the  current  row. 
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shift  | 


a 

SaS 


tab 

shift 

tab 

j control  | 

return 

Database 

option  | 

Style  Sheets 


* 

option  | ^ 

Window 


option  | 

shift 

] I 

tab 


0 


Shift-Right  Arrow  spans  columns, 
joining  the  current  cell  with  the  cell 
to  the  right.  Shift-Left  Arrow  undoes 
the  column  span.  Shift-Down  Arrow 
joins  the  current  cell  with  the  cell  be- 
low. Shift-Down  Arrow  undoes  the 
row  span. 

Tab  moves  the  text  cursor  to  the  next 
cell  to  the  right. 


Shift-Tab  moves  the  text  cursor  to  the 
next  cell  to  the  left. 


Control-Tab  switches  from  text  entry 
to  cell  selection  mode. 


Return  switches  from  cell  selection  to 
text  entry  mode. 


Option-dragging  duplicates  the  se- 
lected item. 


Option-clicking  inline  styles  or  div 
styles  for  the  same  selection  in  the 
Text  Inspector  stacks  the  styles. 

Shift-option-clicking  inline  styles  or 
div  styles  enlarges/doubles  the  style 
for  the  selected  text 


option 

1* 

* 

| control 

* 

Option-clicking  disables  the  invisible 
magnetic  grid  used  for  positioning 
Adobe  GoLive’s  windows. 

Control-clicking  the  Palette,  Inspec- 
tor, or  Color  Palette  window  collapses 
that  window  to  an  icon  and  moves  it 
to  the  right  edge  of  the  screen. 
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The  following  table  lists  the  icons  in  Adobe  GoLive’s  Palette  and 
points  out  where  to  find  more  information. 

Icon  Page  Reference 

Icons  in  the  Body  Tags  Tab 

This  is  the  Layout  Grid  icon. 

A description  appears  on  page  111. 


This  is  the  Layout  Textbox  icon. 

A description  appears  on  page  120. 


This  is  the  Floatbox  icon. 

A description  appears  on  page  212. 


This  is  the  Table  icon. 

A description  appears  on  page  137. 


This  is  the  Image  icon. 

A description  appears  on  page  149. 


This  is  the  Plugin  icon. 

A description  appears  on  page  202. 


This  is  the  Java  Applet  icon. 

A description  appears  on  page  196. 


3> 


This  is  the  ActiveX  Control  icon. 

A description  appears  on  page  218. 


This  is  the  Line  icon. 

A description  appears  on  page  167. 


This  is  the  Horizontal  Spacer  icon. 
A description  appears  on  page  170. 


This  is  the  Java  Script  icon. 

A description  appears  on  page  185. 


This  is  the  Marquee  icon. 

A description  appears  on  page  224. 


This  is  the  Comment  icon. 

A description  appears  on  page  182. 


This  is  the  Anchor  icon. 

A description  appears  on  page  175. 
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This  is  the  Line  Break  icon. 

A description  appears  on  page  183. 


This  is  the  Start  Tag  icon. 

A description  appears  on  page  173. 


This  is  the  End  Tag  icon. 

A description  appears  on  page  173. 


Icons  in  the  Forms  Tab 


This  is  the  Form  icon. 

A description  appears  on  page  447. 


This  is  the  Submit  Button  icon. 

A description  appears  on  page  451 . 


This  is  the  Reset  Button  icon. 

A description  appears  on  page  452. 


This  is  the  Button  icon. 

A description  appears  on  page  474. 


This  is  the  Input  Image  icon. 

A description  appears  on  page  465. 


This  is  the  Label  icon. 

A description  appears  on  page  475. 


This  is  the  Text  Field  icon. 

A description  appears  on  page  456. 


This  is  the  Password  Field  icon. 

A description  appears  on  page  458. 


This  is  the  Text  Area  icon. 

A description  appears  on  page  459. 


This  is  the  Check  Box  icon. 

A description  appears  on  page  455. 


This  is  the  Radio  Button  icon. 

A description  appears  on  page  454. 


This  is  the  Popup  Menu  icon. 

A description  appears  on  page  463. 


This  is  the  List  Box  icon. 

A description  appears  on  page  462. 


This  is  the  File  Browser  icon. 

A description  appears  on  page  468. 
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This  is  the  Hidden  icon. 

A description  appears  on  page  461 . 


This  is  the  Key  Generator  icon. 

A description  appears  on  page  467. 


This  is  the  Fieldset  icon. 

A description  appears  on  page  477. 


Icons  in  the  Header  Tags  Tab 


This  is  the  Is  Index  icon. 

A description  appears  on  page  484. 


This  is  the  Base  icon. 

A description  appears  on  page  485. 


This  is  the  Keywords  icon. 

A description  appears  on  page  487. 


This  is  the  Link  icon. 

A description  appears  on  page  488. 


This  is  the  Meta  icon. 

A description  appears  on  page  489. 


This  is  the  Refresh  icon. 

A description  appears  on  page  491. 


This  is  the  Comment  icon. 

A description  appears  on  page  494. 


This  is  the  Script  icon. 

A description  appears  on  page  495. 


Icons  in  the  Frames  Tab 


This  is  one  of  the  Frame  Set  icons. 

For  more  information  on  this  icon  and  other  frame  sets,  see  page  432. 


Icons  in  the  Site  Tab 


This  is  the  Generic  Page  icon. 

A description  appears  on  page  621. 


This  is  the  URL  icon. 

A description  appears  on  page  621. 


This  is  the  Address  icon. 

A description  appears  on  page  621. 


This  is  the  Color  icon. 

A description  appears  on  page  621. 
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This  is  the  Font  Set  icon. 

A description  appears  on  page  621. 


This  is  the  File  Group  icon. 

A description  appears  on  page  621. 


This  is  the  URL  Group  icon. 

A description  appears  on  page  621. 


This  is  the  Address  Group  icon. 

A description  appears  on  page  621. 


This  is  the  Color  Group  icon. 

A description  appears  on  page  621. 


This  is  the  Font  Set  Group  icon. 

A description  appears  on  page  622. 


Icons  in  the  DHTML  Tab 


This  is  the  Date  & Time  icon. 

A description  appears  on  page  235. 


This  is  the  Button  Image  icon. 

A description  appears  on  page  236. 


This  is  the  Component  icon. 

A description  appears  on  page  241. 


This  is  the  URL  Popup  icon. 

A description  appears  on  page  245. 


This  is  the  Action  Item  icon. 

A description  appears  on  page  246. 


This  is  the  Inline  Action  Item  icon. 
A description  appears  on  page  248. 


This  is  the  Browser  Switch  Item  icon. 
A description  appears  on  page  249. 


Icons  in  the  QuickTime  Tab 


This  is  the  Video  Track  icon. 

A description  appears  on  page  384. 


This  is  the  Effect  Track  icon. 

A description  appears  on  page  388. 


This  is  the  Sprite  Track  icon. 

A description  appears  on  page  401. 


This  is  the  Sound  Track  icon. 

A description  appears  on  page  413. 
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This  is  the  Music  Track  icon. 

A description  appears  on  page  413. 


This  is  the  HREF  Track  icon. 

A description  appears  on  page  416. 


This  is  the  Chapter  Track  icon. 

A description  appears  on  page  419. 


This  is  the  Text  Track  icon. 

A description  appears  on  page  423. 


Appendix  C Creating  Actions 

Overview  Adobe  GoLive  actions,  a feature  of  Adobe  GoLive  Professional  Edi- 

tion, are  built-in  scripting  components  which  allow  you  to  easily  add 
interactivity  to  your  web  pages.  Actions  are  powered  by  JavaScript,  a 
common  and  widely  standardized  Web  scripting  language.  Adobe 
GoLive’s  actions  can  be  easily  added  to  pages  without  knowing  any- 
thing about  JavaScript,  simply  by  dragging  and  dropping  in  an  intu- 
itive fashion.  Because  actions  use  JavaScript,  applying  an  action  will 
add  code  right  into  your  HTML  document. 

Adobe  GoLive  actions  are  also  editable  and  extensible.  You  can  edit 
the  existing  actions  or  create  your  own  to  develop  even  more  power- 
ful or  custom  solutions.  If  you  have  some  experience  with  JavaScript, 
this  document  provides  the  information  you  will  need  to  edit  or  cre- 
ate your  own  actions  in  Adobe  GoLive.  Depending  on  the  complexity 
of  the  actions  you  would  like  to  create,  a basic  to  advanced  level  Jav- 
aScript knowledge  is  required. 


Since  actions  use  JavaScript,  they  can  be  triggered  by  any  number  of 
user  initiated  events.  Events  are  things  like  clicking  a mouse,  moving 
a mouse,  double-clicking,  pressinga  key,  oreven  just  loadinga  page. 
Each  of  these  types  of  events  has  an  associated  event  handler  which 
is  used  to  trigger  the  script.  In  Adobe  GoLive  there  are  three  main 
types  of  actions,  characterized  by  the  types  of  events  which  can  trig- 
ger them. 

Onload  Event  Actions  Onload  event  actions  are  triggered  when  a Web  page  first  loads,  be- 

fore any  user  interaction  occurs.  These  actions  will  execute  before 
any  other  actions  in  the  document.  To  add  an  onload  action,  insert 
an  action  icon  from  the  CyberObjects  tab  of  the  Adobe  GoLive  Palette 
window.  Dragging  the  icon  from  the  palette  into  the  header  region 
of  your  page  sets  the  action  to  trigger  when  the  page  loads.  This  type 
of  action  can  only  be  added  to  the  header  and  will  automatically  add 
the  "onload"  event  handler  into  the  <Body>  tag.  Use  this  type  of 
action  only  when  you  wantsomethingto  happen  when  the  page  first 
loads. 
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The  Adobe  GoLive  Palette  Window 


The  Action  icon 


The  Action  icon  button  after  it  has 
been  dragged  into  the  head  region  of 
the  Layout  view 


The  Inspector  window  with  a text  link 
highlighted  and  the  Action  tab 
displaying 


untitled  2.html 


□ B 


Layout  □ | fR  | Source  m\ an  Preview  □ ) LB) 


■S7  =1  Welcome  to  Adobe  GoLive  4 


<3>  H t, 


m 


IT 


□ Text  Inspector 


Link  Style  f Actions  ) 


Events 


Mouse  Click 


t ✓ Mouse  Enter 


• = 


□□ 

■ ak. 

I ▼ 


Action  Kind  I CD  Goto  Link 
Link  | * 


| BrovseliJ 


Target  Q 


r 


Once  you  place  the  action  object  into  your  page,  clicking  it  will  reveal 
the  action  popup  menu  in  the  Inspector  window  where  you  can  de- 
fine which  action  you  would  like  to  occur.  Once  you  place  the  action 
object  into  your  page,  clicking  it  will  reveal  the  action  popup  menu 
in  the  Inspector  window  where  you  can  define  which  action  you 
would  like  to  occur. 


Link  Actions  Link  actions  are  actions  which  are  applied  to  hyper-linked  items  and 

triggered  by  some  type  of  interaction  with  the  link.  Several  types  of 
events  can  be  made  to  trigger  these  types  of  actions. 

To  add  a link  action  to  your  page  you  first  need  to  create  and  high- 
light a link  (on  a picture  or  text)  and  switch  to  the  Actions  tab  in  the 
Inspector  window.  You  should  see  a list  of  events  on  the  left  side  of 
the  Inspector  window.  If  you  haven’t  highlighted  a hyper-linked  item 
no  events  will  show  up  since  events  can  only  be  triggered  on  a link. 
This  is  because  link  actions  are  initiated  by  a JavaScript  event  han- 
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TimeLine  Editor  Actions 


Actions  can  be  added  into  the 
action  track  of  a timeline  by 
command-clicking  in  the  track 

action  track  


dler,  which  can  only  reside  in  the  <A>  tag  of  a linked  item.  If  you 
want  to  add  a link  action  without  making  the  hyperlink  actually  go 
to  another  page,  you  can  either  make  the  link  to  the  same  page  or 
enter  the  "#"  sign  in  the  URL  field. 

Supported  Events: 

5 MouseClick  - triggers  an  action  upon  a single  mouse  click 

6 MouseEnter  - triggers  an  action  when  the  mouse  pointer  is 
moved  over  a link 

7 MouseExit  - triggers  an  action  when  the  mouse  is  moved  away 
from  a link 

8 Doubleclick -triggers  an  action  when  the  user  double-clicks  a 
link 

9 MouseDown  - triggers  an  action  when  the  user  holds  the  mouse 
button  down  while  the  cursor  is  over  a link 

10  KeyUp  - triggers  an  action  when  the  user  releases  any  key 

11  KeyDown  - triggers  an  action  when  the  user  presses  any  key 

12  KeyPress  - triggers  an  action  when  the  user  presses  or  holds 
down  a key 


A third  way  to  add  actions  is  to  use  the  TimeLine  Editor.  Actions  can 
be  added  to  the  action  track  of  the  Timeline  editor  by  command- 
clicking on  the  action  track.  Unlike  the  previous  two  actions,  Time- 
line actions  are  not  triggered  by  event  handlers  but  rather  by  the 
timeline  sequence,  depending  on  where  the  action  is  located  in  a 
given  sequence.  In  this  way  you  can  initiate  time  based  actions  or  ac 
tions  which  interact  with  a given  scene. 
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Adobe  GoLive 


Creating  Actions 


The  following  actions  ship  with  Adobe  GoLive  Professional  Edition. 
Adobe  GoLive  4.0 

• Get  Form  Value 

• Get  Floating  Box  Position 

• Preload  Image 

• Random  Image 

• Set  Image  URL 

• Go  Last  Page 

• Goto  Link 

• Navigate  History 

• Open  Window 

• Document  Write 

• Open  Alert  Window 

• Set  Status 

• Drag  Floating  Box 

• Flip  Move 

• Move  By 

• Move  To 

• Play  Scene  & Stop  Scene 

• Play  Sound  & Stop  Sound 

• Show  Hide 

• Stop  Complete 

• Wipe  Transition 

• Netscape  CSS  Fix 

• Resize  Window 

• Scroll  Down,  Left,  Right,  Up 

• Set  Back  Color 

• Condition 

• Action  Group 

• Call  Action 

• Call  Function 

• Idle,  Intersection,  and  Timeout 

• Key  Compare 

• Variables 

• Declare  Variable 

• Initi  Variable 

• Read  Cookie 
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Creating  Your  Own 
Actions 

Overview 


• Test  Variable 

• Set  Variable 

• Write  Cookie 


Adobe  GoLive  allows  you  to  easily  create  and  edit  action  files  with  fa- 
miliar Adobe  GoLive  tools.  Actions  are  actually  HTML  files,  not  just 
code  snippets,  which  reside  in  the  Adobe  GoLive  application  folder 
(Mod ules:JScri pts:Actions ).  Any  file  placed  in  the  Actions  folder  will 
appear  when  you  select  the  action  popup  menu  in  Adobe  GoLive. 
Adding  or  deleting  a file  from  this  folder  will  add  or  delete  it  from  the 
action  popup  menu.  If  you  are  using  Adobe  GoLive  4.0,  you  can  or- 
ganize the  actions  however  you  like  within  hierarchical  subfolders, 
so  long  as  these  folders  remain  within  the  Actions  folder.  Any  sub- 
folders will  appear  as  hierarchical  menus  in  the  actions  popup 
menu.  Version  3.0  does  not  have  the  ability  to  display  hierarchical 
menus  so  they  can  only  be  placed  at  the  top  level  of  the  Actions 
folder.  During  start-up,  Adobe  GoLive  scans  the  Actions  folder  to  de- 
termine which  actions  to  load.  If  you  make  any  changes  to  the  con- 
tent of  the  Actions  folder  it  will  not  be  reflected  in  Adobe  GoLive  until 
the  program  is  quit  and  restarted.  Note:  Adobe  GoLive  is  extremely 
sensitive  to  errors  in  actions  files,  if  Adobe  GoLive  crashes  after  you 
add  a new  action,  the  action  file  most  likely  contains  errors  in  syntax 
or  structure.  Simply  remove  it  from  the  Actions  folder  and  restart 
Adobe  GoLive.  For  this  reason  it’s  best  to  edit  action  files  outside  of 
the  Actions  folder  until  you  are  sure  they  are  finished  and  properly 
coded. 

Adobe  GoLive  actions  generally  use  the  extension  .action.  You’ll  need 
to  use  the  .action  extension  in  version  3.0,  but  it’s  not  required  in  4.0 
even  though  it’s  a good  idea  to  use  this  extension  to  maintain  back- 
wards compatibility.  Adobe  GoLive  merely  looks  for  the  presence  of 
a <csactionclass>  tag  in  the  document  to  verify  that  the  file  is  a valid 
action.  To  open  an  action  file  in  Adobe  GoLive  you  will  need  to  add 
the  .action  extension  to  your  filename  extensions  in  the  Preferences 
in  order  for  Adobe  GoLive  to  open  action  files  in  the  layout  mode  in- 
stead of  text  mode.  To  do  this  open  up  the  Preferences  (command-y), 
click  on  General,  and  in  the  field  next  to  Filename  Extensions  add  a 
comma  to  the  last  entry,  followed  by  action  without  a space.  So  it 
should  read  something  like,  “html.htm, action” 
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Anatomy  of  an  Action  File 


Creating  Actions 


The  action  icons  which  appear  in  the  popup  menu  in  Adobe  GoLive 
are  based  on  the  finder  icons  of  the  action  files  themselves.  Icons 
which  appear  in  the  action  pop-up  menu  can  be  changed  by  chang- 
ing the  finder  icon  of  the  action  file.  You  can  change  the  file’s  icon 
through  ResEdit  or  by  copying  and  pasting  the  icon  of  another  file 
into  the  appropriate  actions  file.  This  can  be  accomplished  by  copy- 
ing and  pasting  the  icon  from  the  “Get  Info”  windows  of  each  icon 
within  the  Finder. 


Unlike  Script  files  (.sept  extension),  actions  contain  more  than  just 
JavaScript  code.  An  action  file  is  an  actual  Adobe  GoLive  HTML  file 
which  allows  you  to  modify  the  content  of  the  actions  Inspector  win- 
dow, as  well  as  the  types  of  parameters  that  the  user  can  enter.  Below 
is  a diagram  indicating  the  different  components  of  a Adobe  GoLive 
action  file.  All  actions  must  contain  these  basic  elements  in  order  to 
function  properly.  You’ll  notice  that  many  of  the  items  in  this  page 
are  familiar  Adobe  GoLive  components  such  as  custom  tags,  JavaS- 
cripts,  layout  grids,  etc.  In  this  way  you  can  edit  the  content  and  be- 
havior of  your  action  in  a familiar  Adobe  GoLive  way. 
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Intersection  Action 


Action  Title 


<csactionclass> 

<csactionparanr»> 

<csactionparam> 

</csactionclass> 


Action  Tags 

■ csactionclass 

■ csartionparam 

■ csactionenum 


IE  Functions  Script 


Style  Vis  Functions  Script  ^ 


JavaScript  Indude-Files 
(Protected,  not  editable) 


Intersection  Action  Main  Script  ** 


JavaScript  Code 

(Imp le me ntatio n of  this  Action) 


Floating  Box 
Floating  Box 


“layerl 


“lager2“ 


This  action  returns  true  if  both  specified  Floating 
Boxes  will  be  intersected  otherwise  it  returns 
false. 


Layout  Template 


Now  let’s  look  at  an  another  example.  The  alert.action  file  is  a fairly 
simple  action  file  containing  the  basic  elements  of  a Adobe  GoLive 
action.  You’ll  find  it  in  the  Message  subfolder  of  the  Actions  folder. 
Open  the  folder  now  (if  the  file  opens  as  a text  file,  you’ll  need  to  add 
the  action  extension  to  your  Filename  Extensions  in  the  Preferences. 


Action  Title  This  is  the  title  of  your  action.  It  is  an  optional  component  and  you 

can  use  any  name  like.  This  title  only  appears  in  the  action  layout 
window. 

Action  Tags  Adobe  GoLive  needs  special  tags  to  identify  an  action,  to  create  the 

parameter  controls  and  to  generate  the  JavaScript  code.  These  tags 
are  not  optional.  Because  these  are  custom  tags,  they  appear  as  blue 
rectangles  in  the  layout  mode.  Clicking  them  reveals  the  attributes 
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<csactionclass> 


and  values  associated  with  the  tags.  The  values  are  intended  to  be 
edited  while  the  names  should  be  left  as  is. 


The  <csactionclass>  tag  identifies  the  action  by  creating  a class  ob- 
ject which  Adobe  GoLive  loads  at  start-up.  When  Adobe  GoLive 
launches,  it  searches  the  actions  folder  for  all  class  objects  so  that  it 
can  display  them  in  the  actions  popup  menu.  You  must  use  an  open- 
ing and  closing  <csactionclass>  tag  in  order  for  the  action  to  register 
properly.  This  tag  is  not  optional. 

The  <csactionclass>  tag  has  four  attributes,  plus  a fifth  one  used 
with  Adobe  GoLive  4.0.  Clicking  on  the  tag  will  reveal  its  attributes  in 
the  Tag  Inspector. 
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Click  on  the  <csactionclass>  tag  to  reveal 
the  Tag  Inspector  for  this  item 


CSACTIONCLASS  Attributes  and  their  meanings: 

• NAME:  The  name  which  will  appear  in  the  Actions  popup  menu. 

• FUNCTION:  The  name  of  the  JavaScript  function  which  will  be 
called  when  the  action  is  triggered.  The  name  is  arbitrary  but 
must  correspond  to  the  function  name  in  the  JavaScript  code.  In 
this  example  the  JavaScript  function  is  CSOpenAlert(),  the  func- 
tion which  will  initiate  the  Alert  box.  Note  that  you  do  not 
include  the  parentheses  here 

• NSVERSION:  Supported  version  number  of  Netscape  browser.  It 
is  up  to  you  to  determine  thelowest  supported  browser  version 
number  and  enter  it  here.  The  number  is  used  by  the  Browser- 
Switch  script  and  also  displayed  in  the  Actions  Inspector  win- 
dow. 

• I EVERSION : Supported  version  number  of  Internet  Explorer 
browser.  It  is  up  to  you  to  determine  the  lowest  supported 
browser  version  number  and  enter  it  here.  The  number  is  used 
by  the  BrowserSwitch  script  and  also  displayed  in  the  Actions 
Inspector  window. 

• ACTIONTYPE:  Identifies  the  type  of  Action  based  on  the  number 
value  for  this  attribute.  This  tag  is  not  included  in  this  particular 
example  file. 
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More  about  the  ACTIONTYPE: 

1 Standard  Action 

2 Action  Container  (an  Action  which  does  nothing  on  its  own, 
but  only  points  to  other  actions) 

3 Condition  Action  (returns  a value  of  TRUE  or  FALSE) 

Adobe  GoLive  uses  the  ACTIONTYPE  to  enable/disable  menu  items  in 
the  action  popup  menu.  The  Condition  Popup  menu  only  displays 
actions  of  type  "3".  The  main  action  popup  displays  only  actions  of 
type  "1"  and  "2".  Action  menus  which  are  included  in  a "GLAction- 
ConditionParam"  or  "GLActionGroupParam"  only  display  actions  of 
type  "1"  to  avoid  nested  actions.  An  action  which  contains  a "GLA- 
ctionGroupParam" or  "GLActionConditionParam"  must  beset  to  "AC- 
TIONTYPE = 2"  (action  container  attribute)  to  work  correctly! 

If  there  is  no  ACTIONTYPE  defined  (as  in  this  case),  Adobe  GoLive  will 
handle  the  action  as  a Standard  Action  type. 


<csactionparam> 


Click  on  the  <csactionparam>  tag  to 
reveal  the  Tag  Inspector  for  this  item 


This  tag  is  used  to  identify  and  control  the  user  interactive  compo- 
nents of  the  Inspector  window  that  comes  up  when  a given  action  is 
chosen.  By  inserting  the  appropriate  parameter  type,  you  can  add 
things  like  input  boxes,  pull-down  menus,  browse  buttons,  etc.  into 
youraction  Inspector  window,  and  pass  values  entered  inthese  fields 
to  your  JavaScript  code  for  processing.  The  <csactionparam>  tag  is 
optional  and  can  be  omitted  where  no  user  input  is  needed  for  an 
action.  Adobe  GoLive  4.0  ships  with  13  different  parameter  types. 
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Parameter  Types 
for  Adobe  GoLive  4.0 


- GLActionStringParam 

- GLActionBoolParam 

- GLActionNumParam 

- GLActionEnumParam 

- GLActionLayerParam 

- GLActionLayerPosParam 

- GLActionlmageParam 

- GLActionURLParam 

- GLActionColorParam 

- GLActionPluglnParam 

- GLActionSceneParam 

Adobe  GoLive  4.0  supports  scrolling-enabled  Inspectors  that  help 
developers  build  a clean,  easy-to-use  graphical  user  interface  for 
complex  actions  with  multiple  parameters.  If  you  create  an  action 
that  requires  multiple  controls  (text  boxes,  checkboxes,  etc.)  in  the 
Inspector,  you  can  now  enable  scroll  bars  by  adding  a new  attribute 
to  the  <CSACTION>  tag  in  the  .action  file: 

• HSCROLL:  Inspector  has  horizontal  scroll  bar. 

• VSCROLL:  Inspector  has  vertical  scroll  bar. 

• SCROLL  (or  HSCROLL  plus  VSCROLL:  Inspector  has  both  scroll 
bars. 


- GLActionGroupParam 

- GLActionConditionParam 

In  the  case  of  the  Alert.action  example,  the  <csactionparam>  item 
enables  the  text  string  input  by  the  user  into  the  message  window  to 
be  read  by  the  JavaScript  code.  There  are  two  attributes  of  the  <cs- 
actionparam>  tag 

CSACTIONPARAM  Attributes  and  their  meanings: 

NAME: 

Parameter  name.  This  name  can  be  arbitrariliy  chosen  but  must  ex- 
actly match  the  parameter  name  of  the  associated  field  in  the  layout 
box.  In  this  example  the  value  is  "msg",  you’ll  notice  that  the  name 
of  the  box  in  the  layout  grid  is  also  "msg",  these  two  values  must  be 
identical. 
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TYPE: 

Type  of  parameter.  The  Parameter  Types  are  predefined  values 
which  allow  you  to  add  common  elements  like  pulldown  menus, 
check  boxes,  text  entry  fields,  etc.  into  the  dialog  box.  There  are  a to- 
tal of  13  possible  parameter  types  which  you  can  use. 


Parameter  Types  and  Their  Associated  Inspector  Elements 


GLActionStringParam 

Editable  Text  Field 
Example:  Alert.action 

GLActionBoolParam 

Standard  Checkbox 
Example:  FlipMove.action 


Hello  World 


Anim 


0 


GLActionNumParam 

Editable  Text  Field  for  Numbers 
Example:  FlipMove.action 


Ticks 


60 


GLActionEnumParam 

Popup  Menu  Control  

Example:  WipeTransition.action  Transition  | Wipe  In  From  Left  To  Right 


GLActionLayerParam 

Popup  Menu  Control  (lists  all  Lay- 
ers of  the  current  document)  Floating  Box 
Example:  FlipMove.action 


| Laijer 


D 


GLActionLayerPosParam 

Control  to  define  a position  of  a 
layer. 

Example:  FlipMove.action 


GED 


GLActionlmageParam 

Popup  Menu  Control  (lists  all 
named  images  of  the  current  doc- 
ument) 

Example:  SetlmageURL.action 


Image 


[ picture 


] 


GLActionURLParam 

Control  to  define  a URL. 
Example:  SetlmageURL.action 


Link  | Media  / Images  /Beach  .gif 


GLActionColorParam 

Control  to  define  a Color. 
Example:  SetBackColor.action 


Background  Color 


GLActionSceneParam 

Popup  Menu  Control  (lists  all 
scenes  (Timeline)  of  the  current 
document) 

Example:  PlayScene.action 


[ Scene  1 


] 
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GLActionStringParam 

Editable  Text  Field  | Hello  World 

Example:  Alert.action 


GLActionPluglnParam 

Popup  Menu  Control  (lists  all 
named  plugins  (only  Audio!!)  of 
the  current  document) 

Example:  PlaySound. action 


[ bw848 


J 


GLActionGroupParam 

Special  Control  to  choose  unlimit- 
ed numbers  of  Actions. 

Example:  Group.action 


GJ 


| 7 ? Hone 


GLActionConditionParam 

Special  Control  to  choose  Condi- 
tion Actions.  Condition  Actions 
can  return  TRUE  or  FALSE. 
Example:  Condition.action 
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JavaScript  Source 


The  JavaScript  source  icon  contains  the  JavaScript  code  which  gets 
executed  by  the  action  when  it  runs.  You  can  include  any  number  of 
JavaScript  code  snippets  in  this  area,  either  creating  your  own  or  in- 
cluding some  of  the  .sept  files  included  in  the  actions  folder.  To  edit 
the  JavaScript,  double-click  on  it  to  bring  up  the  script  editor  and  re- 
veal the  source  code.  Note  that  imported  .sept  file  includes  are  pro- 
tected and  cannot  be  edited  in  the  script  editor,  you  must  edit  the 
.sept  file  directly.  Scripts  which  you  create  from  scratch  can  always  be 
edited  in  this  mode. 

In  this  example  double  clicking  the  script  icon  reveals  the  following 
code: 

function  CSOpenAlert(action)  { alert(action[1]);  } 

Analyzing  the  script  we  realize  that  the  function  name  used  is  iden- 
tical to  the  one  defined  in  the  <csactionclass>  function  attribute 
value.  It  is  required  that  these  two  values  be  identical  in  order  for 
Adobe  GoLive  to  correctly  use  the  script.  This  function  in  turn  calls  a 
second  function,  alert()  which  brings  upthe  alert  box.  Because  we’ve 
included  the  array  "action[1J",  this  tel  Is  the  script  to  look  at  the  value 
of  the  first  parameter  <csactionparam>  as  determined  but  what  has 
been  input  into  the  associated  parameter  field.  This  array  contains 
the  actual  value  of  the  parameter  the  user  inputs,  in  this  case  the 
alert  string  text  entered  inthe"msg"  box.  In  this  way  all  parameters 
defined  by  the  <csactionparam>  tag  become  arrays  which  can  be 
referenced  by  their  array  number  in  any  function.  The  first  array,  or 
actionfO]  (JavaScript  is  zero-based),  refers  to  the  function  itself  and 
should  not  be  used.  Thus,  an  action  utilizing  4 parameters  would  use 
action[1]  - action[4]  to  reference  the  parameters.  This  will  be  made 
more  clear  in  the  self-paced  examples  later  on. 


The  Layout  Grid  provides  a way  to  build  your  own  Inspector  windows 
for  Adobe  GoLive  actions.  If  you  look  at  the  Inspector  box  for  the  Alert 
action,  you’ll  see  how  the  layout  grid  corresponds  to  the  contents  of 
this  window. 


Layout  Grid 
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The  layout  of  the  Inspector  window  can 
beset  up  in  the  layout  grid.  Compare  the 
lower  part  of  this  window  with  the  layout 
grid  of  the  Open  Alert  Action 


Customizing  the  Dialog 
Box  Further 


□ : Text  Inspector B 

Link  | Stipe  [ Actions  J 


Events  Actions  f + j 


n 


You  can  customize  this  window  further  by  adding  additional  ele- 
ments. Make  a copy  of  the  alert.action  hie  and  name  it  something 
like  test.action.  Now  open  the  hie  in  Adobe  GoLive  where  you  will  al- 
ter its  contents. 

Try  clicking  on  the  held  containing  the  text  "Message".  You’ll  notice 
the  Action  Control  Inspector  comes  up  and  lists  this  as  a Static  Text 
item  whose  name  is  "Message".  You  can  change  the  text  listed  here 
by  changing  its  name.  Now  click  on  the  blank  entry  held  and  you’ll 
see  this  is  listed  as  a Param  Name.  The  Param  Name  corresponds  to 
the  <csactionparam>  tag  above.  Anything  entered  in  this  held  will 
become  an  array  value  which  gets  passed  to  the  JavaScript  code.  In 
this  example  any  string  input  here  can  be  referenced  in  the  script  by 
the  array  value  “action[1]”. 

Now  expand  the  layout  grid  vertically  so  that  it  measures  about  75 
pixels  high.  Option-click  on  the  "Message"  text  and  drag  it  to  the  bot- 
tom of  the  grid  so  that  it  makes  a duplicate  copy  (note  you  must  du- 
plicate these  elements,  you  cannot  just  drag  in  a new  text  box). 
Change  the  type  from  Static  Text  to  Info  Text  and  the  name  of  the 
message  to:  "This  action  brings  up  an  alert  box".  Info  Text  allows  you 
to  include  textual  information  in  the  dialog  box.  This  is  a good  way 
to  instruct  the  user  about  the  action  or  provide  annotation. 
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Action  Tutorials 


Tutorial  #1:  Goto 
Previous  Page  Action 


There  are  two  ways  to  create  a new  action: 

1 Using  an  existing  action  file. 

Duplicate  an  existing  action  file  and  rename  it. 

Make  any  changes  you  need  and  save  it. 

Put  this  action  file  into  the  action  folder  or  into  a subfolder. 

2 Using  a template  action  file  (a  template  file  is  included  in  Adobe 
GoLive). 

Duplicate  and  rename  it. 

Make  any  changes  you  need  and  save  it  in  the  actions  folder . 


Now  we  will  create  a very  simple  but  useful  action  which  uses  a sin- 
gle JavaScript  function  and  requires  no  parameter  inputs.  This  is  the 
simplest  kind  of  action  and  can  be  repeated  with  any  type  of  JavaS- 
cript function.  In  this  case  we  will  use  history. backO,  a built  -in  Jav- 
aScript method  which  causes  the  previous  page  in  the  browser  to 
load  when  the  action  is  triggered. 

Step  1. 

The  first  thing  you  need  to  do  is  to  duplicate  an  existing  action 
file  and  rename  it.  Adobe  GoLive  4.0  includes  a template  folder 
with  a blank  action  ready  to  duplicate.  Also  in  Adobe  GoLive  4.0 
you  can  create  a new  subfolder  in  the  actions  folder  and  call  it 
"test"  or  some  other  unique  name.  With  version  3.0  you  can  just 
put  the  file  in  with  the  rest  of  the  actions  in  the  actions  folder. 
With  this  example  you  can  just  duplicate  the  alert.action  file  into 
the  appropriate  folder  and  rename  it  PreviousPage.action.  You 
can  change  the  icon  later.  Open  the  file  in  Adobe  GoLive  to  begin 
editing  it. 
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Step  2. 

The  next  step  is  to  give  the  action  a new  Title.  Remember  the  title 
can  be  anything  you  like,  this  title  will  only  appear  in  the  layout 
view.  Try  something  like  "Go  Previous  URL  Action". 

Step  3. 

Next  you  need  to  define  the  action  class.  Click  on  the 
<csactionclass>  tag  to  bring  up  the  tag  inspector  and  view  its  at- 
tributes. The  first  attribute  is  NAME.  The  NAME  can  also  be  any- 
thing you  like,  but  this  is  the  name  that  will  appear  in  the  Adobe 
GoLive  actions  pop-up  menu.  Try  "Go  Last  Page".  At  this  point  if 
you  quit  and  restart  Adobe  GoLive  you  would  have  a new  action 
entitled  "Go  Last  Page”  in  the  actions  menu. 

Step  4. 

The  next  attribute  is  FUNCTION.  This  value  must  correspond  to 
the  name  of  the  function  in  your  JavaScript  code.  Since  you  ha- 
ven’t written  the  code  yet  you  can  make  up  a function  name  now, 
as  long  as  you  repeat  it  later  in  the  code.  Try  "CSGoBackl".  You 
don’t  need  to  use  the  first  two  letters  CS,  the  included  actions 
only  use  this  to  make  the  function  names  more  unique  to  avoid 
the  possibility  of  creating  duplicate  function  names. 
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Step  5. 

The  final  two  attributes  are  the  Netscape  and  Explorer  supported 
browser  versions.  If  you’re  creating  your  own  actions,  you’ll  have 
to  determine  for  yourself  which  browsers  will  support  the  code 
you  are  using.  In  the  case  of  this  action,  the  history.backO  meth- 
od is  supported  by  Netscape  2 browsers  and  above  and  IE  3 
browsers  and  above  (you’ll  have  to  determine  this  on  your  own 
by  testing  your  code  in  each  browser).  Enter  the  number  2 into 
each  field.  Now  you  have  defined  your  action  class  object 

Important  note:  at  this  basic  level  the  action  will  not  perform 
any  browser  checking  and  may  produce  errors  with  earlier  un- 
supported browsers.  This  is  dependent  on  the  behavior  of  the 
JavaScript  code  itself.  It  is  possible  to  do  browser  checking,  but 
this  requires  extra  coding  and  can  be  accomplished  with  the  in- 
clusion of  an  if()  statement  at  the  beginning  of  the  script  which 
checks  the  User  Agent  or  appVersion  of  the  browser.  It’s  good 
practice  to  design  your  actions  so  they  are  well  behaved  In  all 
browsers,  in  others  words,  where  the  script  doesn’t  work,  it 
should  be  ignored  by  the  browser  and  not  produce  any  errors. 

Since  this  script  won’t  require  any  user  input,  it  won’t  need  a 
<csactionparam>  tag.  Delete  this  tag  from  the  page.  Now  you  have 
only  an  opening  and  closing  <csactionclass>  tag,  the  minimum  re- 
quired for  an  action  file. 

Step  6. 

Now  it’s  time  to  put  in  your  JavaScript  code.  You  do  this  by  dou- 
ble-clicking on  the  code  icon  to  bring  up  the  Script  Editor.  Re- 
place the  existing  code  with  the  following: 


function  CSGoBack1()  { history.backO  } 


With  all  Adobe  GoLive  actions,  you  embed  your  JavaScript  code  be- 
tween the  two  curly  brackets  of  the  initial  function.  In  this  case  the 
initial  function  is:  CSGoBack1()  {} 

This  code  is  an  example  of  a very  simple  script  which  uses  no  argu- 
ments, thus  it  requires  no  parameter  values.  For  info  on  how  param- 
eters work  see  the  next  example. 
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Tutorial  #2:  Resize 
Window  Action 


Step  7. 

The  last  step  in  creating  this  action  is  to  modify  the  layout  grid 
for  the  dialog  box  content.  Since  there  are  no  input  fields  you  can 
delete  the  "msg"  field  and  change  the  "message"  field  to  an  Info 
Text  type  using  the  pull-down  menu  in  the  Action  Control  Inspec- 
tor. Now  you  can  include  a message  for  the  user  by  typing  it  into 
the  name  field,  something  like  "Use  this  action  to  return  to  the 
previous  URL". 


After  you  save  your  action  you’ll  be  ready  to  apply  it  in  Adobe  GoLive. 
Remember  you  need  to  restart  the  application  in  order  for  you  new 
action  to  load  into  Adobe  GoLive  and  appear  in  the  actions  menu.  If 
on  restarting  the  application,  Adobe  GoLive  crashes  or  you  get  an  er- 
ror message,  it  means  there’s  an  error  in  your  action  file.  Just  remove 
the  action  from  the  folder  and  restart.  Adobe  GoLive  4.0  will  also 
generate  an  error  message  and  a log  file  listing  the  offending  action. 


Now  you  will  create  a slightly  more  complicated  action,  one  that  re- 
quires input  values  and  passes  this  info  to  the  JavaScript  code  for 
handling. 

Step  1. 

Duplicate  an  existing  action  and  this  time  save  it  as,  ResizeWin- 
dow.action 

Step  2. 

Change  the  action  title  to  Resize  Window  Action 

Step  3. 

Now  define  the  action  class.  Click  on  the  <csactionclass>  tag  to 
bring  up  the  tag  inspector  and  view  its  attributes.  The  first  at- 
tribute is  NAME.  In  this  example  you  will  enter  "Resize  Window" 
as  the  value. 
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Step  4. 

Now  you’ll  define  the  FUNCTION.  Enter  "ResizeWindow",  which 
will  correspond  to  the  function  you’ll  create  for  the  JavaScript  in 
step  7,  ResizeWindow(). 


Step  5. 

Since  the  resizeTo()  method  only  works  in  4.0  browsers,  you 
should  enter  4 for  both  the  Netscape  and  IE  versions  for  the  next 
two  attributes. 


Step  6. 

This  action  uses  two  parameters  or  arguments,  one  for  the  width 
of  the  new  window,  and  one  for  the  height.  The  actual  JavaScript 
function  you’ll  use  is  window.ResizeTo(x.y),  where  x stands  for 
the  new  width  and  y the  new  height.  What  you  want  to  create  is 
a dialog  box  that  let’s  the  user  enter  in  the  new  width  and  height 
directly  into  the  inspector. 


The  way  this  is  accomplished  is  by  using  the  <csactionparam>  tag. 
Click  on  the  first  <csactionparam>  tag  to  view  its  attributes. 
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□ Tag  Inspector  @| 

Tagname  csactionparam 

Attribute  | Value 

NAME  x 

TYPE  GLActionNumParam 

□ 

GDI  l( 

m 

| Delete  ] [ Nev  j 

There  are  only  two  attributes  here,  but  numerous  possible  values. 
For  the  NAME  attribute  you  will  need  to  pick  a name  which  will  cor- 
respond to  the  field  where  the  user  will  enter  that  value.  So  in  this 
case  you  will  enter  "x"  for  width.  The  TYPE  attribute  allows  you  to 
define  the  type  of  dialog  box  element  the  user  will  use  for  input.  If 
you  look  backatthe  list  of  parametertypes  you’ll  seethatan  editable 
text  field  for  entering  numbers  is  the  GLActionNumParam.  Enter  this 
as  the  value  for  the  TYPE  attribute. 

Now  you’ll  need  a second  <csactionparam>  tag  to  correspond  to  the 
height  field.  Copy  and  paste  this  tag  to  duplicate  it,  then  highlight  it 
to  bring  up  the  Tag  Inspector.  Now  you  just  need  to  change  the  NAME 
attribute  value  to  "y"  and  leave  the  TYPE  as  is  since  this  will  also  be 
an  editable  number  field. 

Step  7. 

In  this  step  you  will  enter  the  JavaScript  code.  First  rename  the 
script  to  “Resize  Window  Seri  pt”  and  double-click  on  ittoopen  up 
the  JavaScript  editor.  Enter  in  the  following  code: 

function  CSResizeWindow(action)  { 
window.resizeTo  (action[1],action[2j) 

} 

In  this  example  you  include  two  array  values,  action[1]  corre- 
sponds to  “x”  and  action[2]  corresponds  to  “y”.  So  essentially  you 
are  saying,  when  the  CSResizeWindow  ()  function  executes,  exe- 
cute the  function  window.resizeTo(x,y),  where  “x”  is  the  value  en- 
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tered  for  width  and  “y”  is  the  value  entered  for  height.  Had  you 
entered  a width  and  height  of  640  by  480,  the  code  would  evalu- 
ate as: 

function  CSResizeWindow(action)  { 
window.resizeTo  (640,480) 

} 

Now  here  comes  the  caveat!  Welcome  to  the  world  of  cross- 
browser JavaScripting.!  If  you  test  the  preceding  script  in 
Netscape  4 on  Mac  and  PC  it  works  fine.  In  IE4  on  the  PC  it  works 
fine  but  on  the  Mac  it  doesn’t  do  anything.  Worse,  in  the  3.0 
browsers  the  script  will  generate  an  error.  While  not  executing 
the  action  might  be  tolerable,  generating  an  error  is  not,  so  you’ll 
now  add  some  code  to  prevent  errors  in  earlier  browsers.  As  a 
rule,  you  should  carefully  design  your  actions  so  that  they  don’t 
generate  errors  in  any  browser,  this  holds  true  for  both  Mac  and 
PC  platforms.  And  of  course  the  more  browsers  you  action  works 
with  the  more  useful  it  will  be  to  the  end  user. 

Since  the  script  only  produces  errors  in  3.0  browsers,  you  need  to 
add  a statement  which  instructs  the  script  to  execute  only  if  the 
user  is  surfing  with  a 4.0  or  above  browser.  For  earlier  browsers 
the  script  will  just  be  ignored.  For  this  we  can  use  the  appVersion 
property  to  determinethe  browser  version  and  include  this  in  an 
if  0 statement.  Any  function  included  in  the  curly  brackets  of  this 
script  will  only  execute  if  the  browser  version  is  greater  than  or 
equal  to  4: 

if  (navigator.appVersion.charAt(O)  >=4  { } 

So  you  would  then  modify  the  script  to: 

function  CSResizeWindow(action)  { 
if  (navigator.appVersion.charAt(O)  >=4  { 
window.resizeTo  (action[1],action[2]) 

} 

} 
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Step  8. 

The  last  step  in  creating  this  action  is  to  modify  the  layout  grid 
for  the  Inspector  content.  You’ll  need  two  input  fields  corre- 
sponding to  width  and  height.  These  fields  will  hold  thevaluesof 
x (action[1]  )and  y (action[2]).  Click  on  the  existing  input  field  to 
bring  up  the  Actions  Control  Inspector.  Choose  Param  Name 
from  the  pulldown  menu  and  name  it  "x"  (no  quotes).  Now  du- 
plicate the  tag  using  option-drag  or  copy  and  paste.  Change  the 
name  on  the  copy  to  "y".  You  can  also  add  the  descriptive  text  by 
clicking  on  the  descriptive  text  field  and  choosing  "Static  text" 
from  the  pulldown  menu.  Static  text  is  text  which  doesn’t  change, 
in  this  case  you  will  have  two  fields,  one  which  says  width  and  the 
other  height,  directly  to  the  left  of  the  input  fields. 


Annotating  your  Actions 


You  can  select  the  type  of  annotation 
from  this  pulldown  menu  — 


Adobe  GoLive  allows  you  to  further  customize  the  display  of  the  In- 
spector window  to  provide  more  imformation  about  the  action  to 
the  end  user.  You  can  add  static  text,  informational  text,  or  an  image 
with  an  associated  URL  right  into  your  action  layout  grid.  All  of  these 
items  are  selectable  in  the  Actions  Control  Inspector  pulldown  menu 

|D  Action  Control  Inspector  B| 


[_Static  Text 

D 

Name 

| msg 

1 

Width 

1 1 75 

Height  | 

1 

Align 

f Scale  $ j f Top 

ZD 

a 


Static  Text 

Static  text  is  used  to  label  the  entry  fields  or  components  added  to 
the  layout  grid.  They  appear  static  and  cannot  be  altered  by  the  end 
user.  In  the  previous  example,  the  words  height  and  width  were  cre- 
ated as  static  text.  Static  text  appears  in  bold  in  the  Inspector. 
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Info  Text 

Info  text  is  simply  text  you  add  to  provide  information  about  the  ac- 
tion. You  could  add  a comment  such  as,  “This  action  generates  a ran- 
dom image  when  added  to  a page”.  Info  text  appears  non-bolded  in 
the  Inspector 

Copyright  banner 

It  is  also  possible  to  add  an  image  to  your  layout  and  link  it  to  a URL. 
This  is  useful  if  you’d  like  to  add  a company  logo  to  get  credit  for  cre- 
ating the  action  and  providing  a link  to  your  company  website.  To 
add  an  image  just  dragan  image  icon  from  the  Palette  onto  your  lay- 
out grid,  select  an  image  and  attach  a URL  to  it  in  the  Image  Inspec- 
tor. 


Difference  between 
Actions  and  Scripts 


CyberObjects  are  built-in  script 
components  available  in  the 
Palette  window.  Though  you  can 
edit  the  code  behind  these  objects, 
the  objects  themselves  are  hard- 
coded into  Adobe  GoLive  and 
cannot  be  added  or  deleted  from 
the  program 


You  may  notice  that  Adobe  GoLive  also  includes  some  built-in 
Scripts,  which  are  somewhat  similar  to  Actions.  These  are  scripts  such 
as  the  URL  Popup  or  Browser  Switch  item  in  the  CyberObjects  section 
of  the  Palette  window. 


Adobe  GoLive  Scripts  differ  from  Actions  in  several  ways.  Take  a look 
at  the  Jscripts  folder  to  see  how  these  are  organized. 


Conclusion 
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Here  you  will  see  the  organization  of  Adobe  GoLive  script  and  action 
files.  Adobe  GoLive  Script  files  are  JavaScript  snippets  saved  with  the 
.sept  extension.  Adobe  GoLive  actions  are  HTML  files  which  include 
several  components  and  usually  use  the  .action  extension.  Open  up 
the  file  UPMain.scpt  in  the  URLPopup  folder.  You  will  see  that  it  only 
contains  the  JavaScript  code  for  the  URLPopup  menu  item: 

function  CSURLPopupShow ( formName,  popupName, 
target)  { var  popup  = document [ formName] .ele- 
ments [popupName]  ; window . open (popup . op- 
tions [popup  . selectedlndex]  .value,  target); 
popup . selectedlndex  = 0; 

} 

This  is  the  actual  JavaScript  code  that  is  used  when  you  place  an 
URLPopup  object  into  a web  page.  Adobe  GoLive  will  fetch  the  code 
from  this  file  and  place  it  into  your  HTML.  If  you  want,  you  can  mod- 
ify this  code  with  your  own  JavaScript,  and  Adobe  GoLive  will  use  this 
code  instead.  As  long  as  you  create  valid  code  and  save  it  in  the  cor- 
rect location  with  the  proper  extension,  you  can  customize  a script 
file  however  you  like.  However,  a big  difference  between  scripts  and 
actions  is  that  if  you  create  new  scripts  they  do  not  show  up  automat- 
ically in  Adobe  GoLive.  New  scripts  can  only  be  accessed  by  referenc- 
ing them  from  within  actions  or  from  within  other  scripts.  The 
CyberObjects  available  in  the  Adobe  GoLive  Palette  window  are  hard 
coded  in  C++  and  can  not  currently  be  extended. 


You  should  now  be  familiar  enough  with  Adobe  GoLive  actions  that 
you  can  begin  experimenting  with  and  creating  your  own  actions. 
Once  you  create  your  own  actions,  you  can  also  distribute  them  to 
other  users  to  utilize. 
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Drawbacks  720 
Preferences  721 
Using  with  referenced  files  721 
Absolute  positioning  324 
Action  Group  (Action)  303 
Action  Inspector  234,  268,  275,  276,  303,  304, 
306 

Actions  menu  272 
Drag  Floating  Box  289 
Exec  popup  menu  274 
Open  Alert  Window  Action  285,  287 
Open  Window  Action  284 
Play  Scene  Action  294 
Play  Sound  action  295 
Set  Back  Color  Action  302 
Set  Image  URL  Action  280 
Set  Status  Action  288 
Show  Hide  Action  296 
Stop  Complete  Action  297 
Action  Item  247 
Action  trigger 
On  Load  274 
Action  triggers 
OnCall  274 
OnUnload  274 
Actions 

Action  Group  303 

Actions  menu  272 

Alert  Window  286 

Allow  dragging  in  the  browser  288 

Button  Image  239 

Call  Action  304 

Call  action  from  head  section  304 
Call  Function  305 
Condition  302 

Creating  your  own  actions  777-801 
Declare  Variable  310 
Document  Write  285 


Drag  Floating  Box  288,  289 

Dynamic  audio  playback  294 

Dynamic  scene  playback  control  293 

Dynamic  visibility  control  296 

Event  trigger  273 

Event-driven  decision  302 

Exec  popup  menu  274 

Flip  Move  289,  290 

General  234,  271 

Get  Floating  Box  Position  276 

Get  Form  Value  275 

Go  Last  Page  281 

Goto  Link  282 

Init  Variable  311 

Jump  to  page  in  history  283 

Jumping  backwards  by  one  page  281 

Jumping  to  page  282 

Key  Compare  308 

Launch  actions  by  hitting  a key  308 
Making  a variable  persistent  31 5 
Menu  in  Action  Inspector  272 
Monitoring  browser  window  for  single-shot 
event  302 

Monitoring  browser  window  for  timeout 
event  306 

Monitoring  browser  window  for 
transition  307 

Monitoring  floating  box  position  276 
Move  By  290,  291 
Move  To  292 

Moving  objects  back  and  forth  289 
Moving  objects  horizontally  and 
vertically  290 

Moving  objects  one-way  292 
Navigate  History  283 
Netscape  CSS  Fix  299 
Open  Alert  Window  285,  286,  287 
Open  Window  284 
Play  Scene  268,  293,  294 
Play  Sound  294 
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Preload  Image  277 
Random  Image  278 
Read  Cookie  312 

Reading  the  content  of  a form  element  275 

Reading  values  from  forms  275 

Resize  Window  300 

Resizing  the  browser  window  300 

Running  several  actions  at  a time  303 

Scripts  in  page  body  248 

Scripts  in  page  header  247 

Scroll...  300 

Scrolling  the  browser  window  300 
Set  Back  Color  301, 302 
Set  Image  URL  280 
Set  Status  287,  288 
Set  Variable  314 

Setting  variable  value  at  runtime  314 
Show  Hide  296 

Step  backwards  by  one  page  281 
Stop  Complete  297 
Stop  Scene  293,  294 
Stop  Scene  action  268 
Stop  Sound  294 
Stopping  animation  297 
Swapping  an  image  280 
Swapping  images  in  random  sequence  278 
Test  Variable  313 
Timeout  306 
Transition  307 
Variables  309 
Wipe  Transition  297 
Wiping  objects  in  and  out  297 
Workaround  for  Errors  in  Netscape 
Navigator  299 
Write  Cookie  315 
Actions  Inspector  278,  307,  308 
Actions  Menu  272 
Active  Server  Pages  75,  757 
ActiveX  Controls  218 
Attributes  223 
Description  218 
Display  options  220 
Inserting  218 


Resizing  220 
Selecting  218 
Special  properties  222 
ActiveX  Inspector 
Attributes  tab  223 
Basic  tab  219 
Special  tab  222 
Add  files  dialog  box  630 
Add  to  Keywords  command  487 
Adding 

Block  indents  133 
New  pages  in  Site  View  680 
Additional  languages  601 
Adjusting 

Image  alignment  154 
Image  border  155 
Image  size  153 
Image  spacing  156 
Java  applet  alignment  199 
Plugin  alignment  206 
Plugin  spacing  205 
Adobe  Photoshop  7 
AIAT  7,  587 
AIAT  Module  9 
Aligning 

Block  spacers  172 
Lines  170 

Aligning  paragraphs 

Using  the  Format  menu  133 
Using  the  Toolbar  134 
Alternative  message  text 
Images  156 
Java  applets  201 
Anchor  Inspector  178 
Anchors  175 

Anchor  Inspector  178 
Inserting  177 

Problems  with  browsers  177 
Animation 

Creating  object  251 
Floating  box  254 
Managing  multiple  objects  261 
Mouse  rollover  229 
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Multiple  objects  259 
Scenes  232,  267 
Animation  path  233 
Determining  256 
Recording  258 

Apple  Information  Access  Technology  7,  587 

Apple  system  colors  503 

AppleScript  74,  446,  546-557 

ASP  75,  757 

Audio  413 

B 

Background  color 

Cascading  Style  Sheets  324,  334,  362 
Dynamic  color  change  301 
Floating  box  21 5,  233,  253 
Layout  grid  114 
Layout  text  box  120 
Page  28,29, 105 
Selecting  105 
Background  image 

Floating  box  216,  253 
Page  104 

Base  Inspector  486 
Base  tag  486 
Basic  page  settings  102 
Binary  525 
Block  indents 
Adding  133 
Block  spacers  170 
Body  Script  Inspector  187, 191 
Broken  Links  180 
Browser  sets  542 
Browser  Switch  Inspector  249 
Browser  Switch  Item  249 
Browsers 

Importing  address  books  630 
Importing  bookmark  files  630 
Setting  status  line  text  287 
Switching  pages  for  incompatible 
browsers  250 


Bug 

Button  on  Toolbar  91, 180,  687 
Error  indicators  in  Site  Window  686 
Intermittent  animation  problem  in 
Netscape  Navigator  252 

Building 

Forms  446 
Web  pages  85-226 
Button  Image  229,  236 
Actions  239 

Linking  with  destination  239 
Setting  Up  237 
Button  Image  Inspector 
Actions  tab  271 
Button  Inspector 
Actions  298 
Actions  tab  240,  300 
Basic  tab  238 
Flip  Move  Action  290 
Goto  Link  action  282 
Move  To  Action  292 
Msg  & Link  tab  239 
Button  Inspector 
Actions  tab  283 
C 

Cache  storage  11 
Call  Action  (Action)  304 
Call  Function  (Action)  305 
Cascading  Style  Sheets 

Absolute  length  units  335 
Absolute  positioning  324 
Applying  styles  347 
Background  color  324,  334,  362 
Background  properties  362 
background-attach  property  363 
background-color  property  362 
background-image  362 
background-position  property  363 
background-repeat  property  363 
Border  properties  361 
Border  property  334 
border  property  361 
Box  formatting  model  334 
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Box  properties  356 
Cascading  order  333 
Changing  cascading  order  350 
clear  property  358 
clip  property  360 
Colors  336 
Content  area  334 
Creating  classes  343 
Creating  external  stylesheet  340 
Creating  IDs  344 
Creating  stylesheet  340 
Creating  tag  selectors  341 
Deleting  styles  346 
Duplicating  styles  346 
External  stylesheets  330 
float  property  358 
Font  styles  353 
font-family  property  354 
font-style  property  354 
font-variant  property  356 
font-weight  property  354 
foreground-color  property  353 
Formatting  options  325 
height  property  358 
Imported  stylesheets  331 
Inheritance  329 

Internal  stylesheet  with  classes  332 

Internal  stylesheets  with  tag  selectors  331 

Keyword  units  336 

letter-spacing  property  355 

line-height  property  353 

Fist  properties  363 

list-style-image  property  364 

list-style-position  property  364 

list-style-type  property  364 

Margin  property  334 

margin-property  357 

Naming  styles  346 

overflow  property  360 

Padding  property  334 

padding-property  357 

Percentage  units  336 

position  property  359 


Positioning  properties  359 
Previewing  contextual  selectors  342 
Referencing  external  stylesheets  349 
Relative  length  units  335 
Rules  327 
Selector  327,  328 
Specification  327 
Style  inventory  352 
Style  markup  181 
Stylesheets  in  HTML  329 
Support  through  browsers  352 
Switching  pages  for  incompatible  browsers 
250 

Text  properties  355 
text-align  property  356 
text-decoration  property  354 
text-indent  property  355 
text-transform  property  356 
Typography  323 
Unsupported  properties  364 
vertical-align  property  356 
Viewing  Style  Properties  346 
visibility  property  360 
width  property  358 
word-spacing  property  355 
CGI,  see  Common  Gateway  Interface 
Change  References  dialog  box  660 
Change  URL  dialog  box  652 
Changing  filename  645 

Changing  hyperlinks  and  file  references  660,  676 
Chapter  Track  Inspector 
Basic  tab  421 
Chapter  tab  422 
Chapter  tracks  419 
Check  Box 

Inserting  455 
Checkbox  455 
Choosing 

Paragraph  styles  from  Format  menu  132 
Paragraph  styles  from  Toolbar  133 
Clear  Site  command  628,  653,  656,  659 
Clear  Site  dialog  box  642 
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Clickable  Image  Inspector 
Actions  tab  271 
Clickable  image  map 
Inserting  162 

Clickable  image  maps  162 
Editing  163 
Linking  with  page  164 
Collapsing  the  outline  view  515 
Color  Inspector  655 
Color  Palette  9,  85 

Apple  Colors  tab  503 
CMYK  tab  501 
Color  Palette  Module  9 
Color  spaces  501 
Custom  colors  504 
Description  90 

Floating  box  background  color  21 5,  233, 
253 

General  499 

Grayscale  tab  502 

Image  map  color  163 

Indexed  Colors  tab  503 

Interaction  with  Site  Window  612 

Layout  grid  color  114 

Layout  text  box  background  color  120 

Page  background  color  28, 105 

Quick  Start  27 

Real  Web  Colors  tab  504 

RGB  tab  501 

Site  Colors  tab  506,  612,  654 
Table  cell  147 
Table  color  143 
Table  row  color  146 
Text  color  28,  500 
Untitled  colors  655,  659 
Web  Named  Colors  tab  505 
Color  spaces  501 
Coloring 

Drag  & Drop  coloring  500 
Image  map  163 
Layout  grid  114 
Layout  text  box  120 
Page  28, 105 


Table  143 
Table  cell  147 
Table  row  146 
Text  28, 105,  500 
Colors 

Cascading  Style  Sheets  336 
ColorSync™  2.5  165 
Finding  out  color  usage  656 
Managing  in  Site  Window  612,  654 
Site  View  671,714 
ColorSync™  165-167 
Preferences  167 
Using  at  page  level  166 
Using  at  single-image  level  165 
Comment  Inspector  182,  494 
Comments  182 

Outline  view  521 

Common  Gateway  Interfaces  446 
Component  Inspector  244 
Components,  see  Dynamic  Components 
Compression  Settings  (Dialog  box)  405 
Condition  (Action)  302 
Contaction  Host  dialog  box  705 
Contextual  menus  80 
Controllers 

Floating  Box  Controller  261 
Layout  View  Controller  90,  350 
Link  View  Controller  675 
Site  View  Controller  667,  668,  669,  671 , 679 
Create  a Site  Folder  dialog  box  704 
Creating 
Site  622 

Creating  actions 

Actions  that  ship  with  Adobe  GoLive  780 

Adobe  GoLive  Action  types  777 

Anatomy  of  action  file  782 

Annotating  799 

Changing  action  icon  782 

Conclusion  801 

csactionclass  784 

CSACTI  ON  CLASS  attributes  785 

csactionparam  786 

CSACTI  ON  PA  RAM  attributes  787 
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Custom  tags  783 

Customizing  dialog  boxes  791 

Difference  between  actions  and  scripts  800 

JavaScript  source  790 

Layout  grid  790 

Link  actions  778 

Onload  event  actions  777 

Overview  777,  781 

Parameter  types  787 

Parameter  types  and  associated  Inspector 
elements  788 
Supported  events  779 
TimeLine  Editor  actions  779 
Title  783 

Tutorials  792-799 
Creating  by  importing  624 
CS  Encodings  9,  94 
CSS  button  340 
CSS  Selector  Inspector 
Background  tab  362 
Border  Properties  tab  361 
Description  339 
Font  Properties  tab  339 
Font  Style  tab  353 
General  352 
List  Properties  tab  363 
Margins  tab  357 
Positioning  tab  359 
Property  Viewer  Tab  750 
Property  Viewer  tab  346 
Text  Properties  tab  355 
Using  with  CSS  tab  in  Web  Database  749 
CSS  selectors 
Classes  328 

Contextual  selectors  328 
ID  328 

Simple  selectors  328 
Tags  328 

CSS  Stylesheet  Inspector 
CSS  tab  749 
Source  tab  750 


CSScriptLib,  see  JavaScript  - Using  external 
library 

CyberFlash  Module  9 
CyberMovie  Module  9 
CyberObjects  Module  9 
HTML  Outline  Module  9 
CyberStudio  2.0  project  files 
Importing  724 
Updating  722 
D 

Date  & Time  Inspector  236 
Date  & Time  Stamp 
Setting  Up  235 
Date  and  Time  Stamps  235 
Declare  Variable  (Action)  310 
Default  filename  extension  101 
Designing  a site  677 
DHTML  66 

DHTML  components,  see  Dynamic  Components 
Dialog  box 

New  Site  from  FTP  626 
Dialog  boxes 

Change  References  660 

Change  URL  652 

Clear  Site  642 

Compression  Settings  405 

Contaction  Host  705 

Create  a Site  Folder  704 

Export  Site  Options  701 

Font  Set  Editor  130 

Getting  File  705 

HTML  Options  703 

Import  file  dialog  box  632 

Import  Site  Folder  624 

Move  Files  639 

Movie  file  selection  385 

Preferences  - Fonts  100 

Preferences  - General  - Cache  11 

Rename  File  650 

Select  Effect  391 , 393 

Select  Encoding  637 

Select  Site  Folder  625 
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Select  the  home  page  of  the  site  to 
import  625 

Site  Settings  47,  643,  693 
Sound  file  selection  414 
Web  Download  705 
Dimmed  menu  commands  511,  512 
Display  attributes  516 
Distributed  site  715,  718 
DIV  tag  212,  251 
Document  Encoding 
Japanese  97 
Korean  97 
Western  97 

Document  statistics  567 
Document  views  60 
Frames  view  63 
Layout  view  62 
Outline  view  64 
Document  window  85 
JavaScript  button  187 
Preview  tab  562 
Switching  to  Site  Window  661 
Document  Write  285 
Domain  name  706 
Download  times  567 
Drag  & Drop 

Color  Palette  to  Site  Window  654 
Dynamic  component  244 
Finder  to  Site  Window  629 
Images  from  Adobe  Photoshop  1 59 
Images  from  File  Inspector  to  page  649 
Images  from  Finder  159 
Moving  files  in  Site  Window  638 
Previewing  images  159 
Resources  into  Site  Window  629 
Searching  575 

Select  the  homepage  for  the  site  to 
import  625 

Select  the  site  folder  to  import  625 
Text  import  121 
Drag  Floating  Box  288 
Duplication  (menu  command)  639 


Dynamic  component 

Drag  & drop  insertion  244 
Inserting  243 

Dynamic  components  241 ,611, 650 
Saving  for  use  in  site  242 
Setting  up  page  as  component  242 
Source  files  242 
Dynamic  HTML  66 
E 

Edit  Font  Sets  (Menu  command)  129 
Editing 

Clickable  image  maps  163 
HTML  code  in  Outline  view  518 
Line  attributes  169 
Spacer  attributes  172 
Web  Database  736 
Effect  tracks  388 
E-Mail  addresses 
Importing  630 
E-mail  addresses  652 
E-mail  adresses 

Managing  in  Site  Window  611 
Encodings  510,  644 
CS  Encodings  9,  94 
MacOS  Encodings  9,  94 
Opening  imported  foreign-language  file  637 
Text  Encoding  Converter  5,  94 
Endtag  Inspector  175 
Error  indicators  in  Site  Window  684 
Errors 

Repairing  687 

Errors  caused  by  external  references  687 
Eudora  632 

Expanding  the  outline  view  515 
Export  Site  command  691 , 701 
Export  Site  Options  dialog  box  701 
Exporting  site 
As  in  site  701 

Export  only  referenced  files  702 
Flat  702 

Hierarchy  options  701 
Honor  publish  status  702 
Separate  pages  and  media  702 
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Site  folder  names  702 
Streamlining  HTML  source  703 
Extensible  Markup  Language  75,  755 
External  Stylesheet  Inspector  338,  349 
External  stylesheets  330 
Extracting  color  500 
F 

Field  Inspector 

Actions  tab  299,  301 
Fieldset  & Legend 
Inserting  477 
File  Browser  468 
Inserting  468 
File  information  646 
File  Inspector  615 

Content  tab  646,  648 
File  tab  645,  647 
Importing  image  from  649 
Managing  files  644 
Page  tab  644 

Previewing  QuickTime  movie  648 
Renaming  files  649 
Viewing  file  properties  645,  647 
File  menu  94 

Document  Encoding  97 
Filename  extensions 
Images  161 

Find  & Replace  571-595 

Adding  files  to  global  search  577 

Back-references  586 

Drag  & Drop  575 

Find  dialog  box  575 

Find  file  592 

Find  Next  574 

Global  find  & replace  580 

Global  search  576 

In  current  page  578 

In  HTML  source  code  576 

In  multiple  files  580 

In  Site  Window  576 

Index  search  587 

Local  find  & replace  578 

Local  search  573 


Options  574 

Ready-to-use  wildcard  options  585 
Replace  & Find  Next  582 
Replace  All  582 
Replace  command  581 
Search  history  573 
Selected  text  575 
Wildcard  characters  585 
Wildcard  search  583 
Find  dialog  box  572 

Find  & Replace  tab  572 
Find  File  tab  592 
Search  in  Site  Index  tab  588 
Find  Preferences 

General  settings  593 
Regular  Expr  595 
Finder  labels  645 
Finding  files  in  site  592,  616 
Firewall  48,  627,  694 
Flip  Move  289 
Floating  box 

Background  color  233,  253 
Description  251 
Inserting  214 

Floating  Box  Controller  261 
Floating  Box  Inspector  67,  215,  231,  233,  253, 
259,  265 

Animating  a floating  box  254 
Background  color  and  image  253 
Controlling  visibility  of  floating  boxes  266 
Positioning  floating  box  256,  264 
Recording  animation  path  258 
Resizing  floating  box  253 
Selecting  shape  of  animation  path  257 
Stacking  order  of  floating  boxes  265 
Floating  Boxes 

Marker  in  document  window  214 
Floating  boxes  66 

Absolute  positioning  212,  215,  233,  255 
Adding  content  216,  252 
Background  color  215 
Background  image  216,  253 
Description  231 


Dynamic  stacking  233 
General  212 

HTML  content  214,  216,  252 
Inserting  251 

Multiple-object  animation  259 
Naming  253 
Resizing  215 
Setting  up  214 
Stacking  order  213,  215,  262 
Visibility  233,266 
z-index  213,  215,  262 
Folder 

Honor  publish  status  while  exporting  638 
Folder  Inspector  638 
Folder  publishing 
conditions  638 

Font  Set  Editor  (Dialog  box)  130 
Font  Set  Inspector  658 
Font  sets  128 
Fontsets 

Managing  in  Site  Window  612,  657 
Foreign  Code 

Body  section  759 
Head  section  758 
Tables  759 
Form  Button 
Inserting  474 

Form  Button  Inspector  452,  453,  475 
Form  Check  Box  Inspector  456 
Form  Fieldset  Inspector  478 
Form  File  Inspector  469 
Form  Hidden  Inspector  461 
Form  Image  Inspector 
Special  466 
Form  Inspector  448 
Form  Keygen  Inspector  468 
Form  Label  Inspector  477 
Form  List  Box  Inspector  462 
Form  Password  Inspector  458 
Form  Popup  Inspector  464 
Form  Radio  Button  Inspector  454 
Form  tag 

Inserting  447 


Form  Text  Area  Inspector  460 
Form  Text  Field  Inspector  457 
Format  menu  132 

Aligning  paragraphs  133 
Choosing  paragraph  styles  132 
Formatting  lists  135 
List  submenu  135 
Formatting 

Lists  using  Format  menu  135 
Lists  using  Toolbar  136 
Text  123 

Formatting  characters 
Using  Style  menu  124 
Using  the  Toolbar  126 
Forms  445 

Access  keys  472 
Building  446 
Check  Box  455 
Disabled  elements  473 
Fieldset  & Legend  477 
File  Browser  468 
Form  Button  474 
Form  navigation  470 
Form  tag  447 
Hidden  element  461 
HTML  4.0  469 
Input  Image  466 
Key  Generator  467 
Label  476 
List  Box  462 
Password  Field  458 
Popup  Menu  464 
Radio  Button  454 
Read-only  elements  473 
Reset  Button  453 
Submit  Button  451 
Text  Area  459 
Text  Field  457 
Forms  in  the  Palette  446 
Forms  Inspectors 
Focus  472 

Start/Stop  indexing  button  471 
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Frame  Inspector  433,  434 
Preview  Frame  button  433 
Frame  Preview  tab  in  document  window  438 
Frame  Set  Inspector  433,  434 
Frames  63,  429 

_top,  -parent,  _ self,  -blank  targets  441 

Definition  430 

Dos  and  Don'ts  431 

Drag  & Drop  437 

Examples  440 

Frames  tab  in  Palette  432 

Frame-Set  example  365 

Inserting  434 

Naming  435 

Number  of  frames  in  a frameset  430 
Scrolling  behavior  435 
Setting  up  434 
Size  options  435 
table  of  contents  on  sidebar  429 
Things  to  avoid  431 
Frames  view  63,  432 
Frameset 

Definition  430 
FrameSet  Example  440 
Frameset  Inspector 

Preview  buttons  433 
Frameset  options  434 
FTP 

Built-in  FTP  tool  691 
Connecting  to  server  692 
Download  695 
Download  preferences  700 
Error  messages  695 
Favorite  servers  699 
File  upload  or  download  691 
Filename  extension  mapping  700 
General  46 

Incremental  update  691, 695 
Listing  files  to  upload  694 
Passive  mode  699 
Server  platforms  692 
Server  settings  693 
Setup  693 


Standalone  FTP  Upload  & Download 
window  691, 696 
Updating  file  692 
Upload  695 
Upload  settings  694 
Uploading  referenced  files  only  694 
FTP  preferences  697,  700 
FTP  tools  691 

FTP  Upload  & Download  command  696 

G 

Gamma  151 

Get  Colors  Used  command  655 

Get  Floating  Box  Position  276 

Get  Fontsets  Used  command  658 

Get  Form  Value  275 

Get  References  Used  command  653 

Getting  File  dialog  box  705 

GIF  19,  30,  150, 159,  647 

Go  Last  Page  (Action)  281 

Goto  Link  282 

Graphics 

Import  preferences  160 
Link  instead  of  image  161 
Graphics  formats 

Conversion  upon  drag  & drop  160 
GIF  19,  30,  150,  159,  647 
JPEG  19,  30,  150, 159,  647 
PICT  151, 159 
PNG  19,  30, 150,  159,  647 
TIFF  151, 159 
Grayscales  502 
H 

Head  comment  494 
Head  Script  495 
Head  Script  Inspector  191,  495 
Head  section 
Opening  484 
Head  tags  483 

General  information  483 
Inserting  483 
Hidden  forms  tag 
Inserting  461 
Hidden  icon  461 
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Hierarchical  lists  136 
Homepage  selection  645 
Horizontal  lines 
Aligning  170 
Editing  attributes  169 
Inserting  168 
Resizing  168 
Toggling  style  169 
Horizontal  spacers  170 
HREF  Track  Inspector 
Basic  tab  417 
HREF  tab  418 
HREF  tracks  41 6 
HTML  4.0  445 
HTML  4.0  forms 

Access  key  navigation  472 
Disabled  elements  473 
Focus  472 

Form  navigation  470 
General  469 

Read-only  elements  473 
Tabbing  navigation  470 
HTM  L fragments  1 06,  242 
HTML  frames  429 
HTML  Options  dialog  box  703 
HTML  Outline  Module  9,  510 
Hyperlinks  175 

Inspecting  and  Creating  179 

I 

IE  Module  9,  218,  224 
Image  formats 
Basics  150 

Conversion  upon  drag  & drop  160 
GIF  19,  30, 150, 159,  647 
JPEG  19,  30, 150,  159,  647 
PICT  151, 159 
PNG  19,  30,  150, 159,  647 
TIFF  151,  159 
Image  Inspector 

Actions  tab  234,  271,279 
Basic  tab  152 

Image  Inspector  window  57 
Link  tab  165 


Map  tab  162 
Special  tab  155, 157 
Images  149 

Adjusting  size  153 
Alignment  154 
Alternative  message  156 
Border  width  155 
Clickable  image  maps  162 
Dynamic  swap  280 
Filename  extensions  108, 161 
Gamma  151 

Image  as  form  button  1 56 
Image  as  link  156 
Import  preferences  160 
Inserting  151 

Link  instead  of  image  161 
Low-resolution  153 
Missing  images  157 
Point  & Shoot  158 
Preferences  160 
Preloading  277 
Resize  warning  154 
Resize  warnings  154 
Setting  up  152 

Swapping  in  random  sequence  278 
Turning  into  button  image  237 
Vertical  and  horizontal  spacing  156 
Import  file  dialog  box  632 
Import  Site  Folder  dialog  box  624 
Imported  stylesheets  331 
Importing 

CyberStudio  2.0  project  files  724 
E-Mail  addresses  630 
Files  into  Site  Window  629 
Site  624 
URLs  630 
Index  search 
Options  589 

Showing  results  in  Find  window  590 
Showing  results  in  new  page  591 
Site  index  file  588 
Using  589 
Indexed  Colors  503 
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Init  Variable  (Action)  311 
Inline  Action  Inspector  248 
Inline  Action  Item  248 
Input  Image  465 
Inserting 

ActiveX  Controls  218 

Anchor  177 

Base  tag  486 

Check  Box  455 

Clickable  image  map  162 

Comments  in  Outline  view  521 

Dynamic  component  243 

Fieldset  & Legend  477 

File  Browser  468 

Floating  box  214 

Form  Button  474 

Form  tag  447 

Frames  434 

Flead  comment  494 

Flead  tags  483 

Hidden  forms  tag  461 

Images  151 

Input  Image  466 

Islndex  tag  485 

Java  applet  placeholders  196 

JavaScript  placeholders  186 

Key  Generator  467 

Keywords  tag  487 

Label  476 

Line  Break  183 

Line  break  183 

Link  tag  488 

List  Box  462 

Marquee  224 

Meta  tag  490 

Password  Field  458 

Plugin  202 

Popup  Menu  464 

Radio  Button  454 

Refresh  tag  491 

Reset  Button  453 

Script  495 

Spacers  171 


Submit  Button  451 
Tables  138 
Text  120 
Text  Area  459 
Text  Field  457 
Unknown  head  tag  492 
Unknown  tags  174 
Inspecting 
Images  647 
Media  files  647 
Pages  644 
Site  for  errors  686 
Inspecting  links 

Link  Inspector  672 
Site  View  671 
Inspector  85 

Features  and  controls  81 
General  Description  89 
Interaction  with  Palette  89 
Inspectors 

Action  Inspector  234,  268,  272,  275,  276, 
278,  280,  284,  285,  287,  288,  289, 
294,  295,  296,  297,  302,  303,  304, 
306,  307,  308 

ActiveX  Inspector  219,  222,  223 
Anchor  Inspector  178 
Base  Inspector  486 
Body  Script  Inspector  187, 191 
Browser  Switch  Inspector  249 
Button  Inspector  238,  239,  240,  282,  290, 
292,  298,  300 
Button  Inspector  283 
Chapter  Track  Inspector  421,  422 
Collapsing  90 
Color  field  499 
Color  Inspector  655 
Comment  Inspector  182,  494 
Component  Inspector  244 
CSS  Selector  Inspector  339,  346,  353,  355, 
357,359,  361,362,363,  750 
CSS  Stylesheet  Inspector  749,  750 
Date  & Time  Inspector  236 
Endtag  Inspector  175 
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External  Stylesheet  Inspector  338,  349 
Field  Inspector  299,  301 
File  Inspector  615,  644,  645,  646,  647,  648, 
649 

Floating  Box  Inspector  21 5,  231 , 233,  253, 
254,  256,  257,  258,  259,  264,  265, 
266 

Focus  controls  472 
Folder  Inspector  638 
Font  Set  Inspector  658 
Form  Button  Inspector  452,  453,  475 
Form  Check  Box  Inspector  456 
Form  Fieldset  Inspector  478 
Form  File  Inspector  469 
Form  Hidden  Inspector  461 
Form  Image  Inspector  466 
Form  Inspector  448 
Form  Keygen  Inspector  468 
Form  Fabel  Inspector  477 
Form  Password  Inspector  458 
Form  Popup  Inspector  464 
Form  Radio  Button  Inspector  454 
Form  Text  Area  Inspector  460,  462 
Form  Text  Field  Inspector  457 
Frame  Inspector  433,  434 
Frame  Set  Inspector  433,  434 
General  57 

Head  Script  Inspector  191, 495 
H REF  Track  I nspector  417,418 
Image  Inspector  152, 155, 157, 162, 165, 
279 

Inline  Action  Inspector  248 
Islndex  Inspector  485 
Java  Applet  Inspector  197,  201 
JavaScript  Inspector  190, 191 
Keywords  Inspector  487 
Fayout  Grid  Inspector  113 
Fayout  Textbox  Inspector  120 
Fayout  View  Controller  90,  350,  748 
Fine  Break  Inspector  183 
Fine  Inspector  30, 169 
Fink  Inspector  488,  673,  674,  676 
Fink  View  Controller  675 


Marquee  Inspector  224,  226 
Meta  Inspector  490 

Multiselection  Inspector  116, 117, 118 
Page  Inspector  105, 107, 166,  242,  317,  683 
Plugin  Inspector  204,  207,  208 
QuickTime  Inspector  382 
Reference  Inspector  652 
Refresh  Inspector  491 

Site  View  Controller  667,  668,  669,  671 , 679 
Sound  Track  Inspector  41 5 
Spacer  Inspector  172 
Sprite  Track  Inspector  403,  404,  405,  407 
Table  Inspector  142, 145, 146,  759 
Tag  Inspector  174,  210,  493 
Text  Inspector  179,  281,  291, 347 
Text  Track  Inspector  424,  425 
URF  Popup  Inspector  246 
Userdef  Inspector  211 
Video  Effect  Track  Inspector  389,  392 
Video  Track  Inspector  386 
Web  DB  Attribute  Inspector  742 
Web  DB  Character  Inspector  746 
Web  DB  Enum  Inspector  743 
Web  DB  Section  Inspector  738 
Web  DB  Tag  Inspector  734,  735,  738,  740, 
741 

Interactive  resizing  92 

Internal  stylesheet  with  classes  332 

Internal  stylesheets  with  tag  selectors  331 

Internet  Config  697 

Internet  Service  Provider  706 

Islndex  Inspector  485 

Isindex  tag  485 

ISP,  see  Internet  Service  Provider  706 

J 

Java  applet  icon  196 
Java  Applet  Inspector 
Alt  tab  201 
Basic  tab  197 
Java  applets  196 
Alignment  199 
Inserting  196 
Naming  200 
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Point  & Shoot  200 
Resizing  198 
Selecting  196 
Setting  up  197 
Spacing  198 

Using  as  HTML  containers  201 
JavaScript  66, 185 

Basic  examples  192 
Editor  188 
Editor  buttons  189 
Font  preferences  195 
General  preferences  193 
Inserting  placeholders  186 
JavaScript  versus  Java  186 
Previewing  191 
Printing  preferences  195 
Setting  up  187 

Syntax  highlighting  preferences  194 
Using  external  library  316-319 
Version  187 

Where  to  look  for  information  186 
JavaScript  Inspector 
Events  tab  190 
Objects  tab  191 
Script  tab  190 
JavaScript-Editor 
Text-Macros  192 
JPEG  19,  30,  150, 159, 166,  647 
J Script  66, 185 
K 

Key  Compare  (Action)  308 
Key  events 

Key  down  273 
Key  press  273 
Key  up  273 
Key  Generator  467 
Inserting  467 
Keyframes  233 
Inserting  254 
Keywords  Inspector  487 
Keywords  tag  487 


L 

Label 

Inserting  476 
Language 

Selecting  94 
Layout  Grid 

Browser  requirements  111 
Layout  grid  24,  60,  62 
Adding  Content  114 
Aligning  objects  116 
Alignment  113 
Background  color  114 
Cloning  object  size  116 
Distributing  objects  117 
Floating  box  above  214 
Grid  spacing  113 
Height  113 

Multiselection  Inspector  116, 117 
Positioning  objects  114 
Properties  113 
Resizing  112 
Snap  to  grid  113 
Toolbar  86, 114, 115 
Visibility  113 
Width  113 
Layout  Grid  icon  111 
Layout  Grid  Inspector  113 
Layout  rulers  91 

Layout  Text  Box  25,  36,  62, 120, 121 
Layout  Textbox  Inspector  120 
Layout  view  62 
Layout  rulers  91 

Layout  View  Controller  90,  350,  748 
Custom  color  for  styles  181 
Line  Break 

Inserting  183 
Line  Break  Inspector  183 
Line  Breaks  183 

Clear  attribute  184 
Suppressing  128 
Line  icon  26 
Line  Inspector  30, 169 
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Lines 

Aligning  170 
Editing  attributes  169 
Inserting  168 
Resizing  168 
Toggling  style  169 
Link  Hierarchy  mode  617,  663,  679 
Link  in  head  section  485,  488 
Link  Inspector  488,  676 

Changing  hyperlinks  and  file  references  676 

Customizing  675 

Eye  button  675 

Inspecting  homepage  673 

Inspecting  links  673 

Open  button  in  toolbar  616,  653,  657,  659, 
686,  688,  689 

Viewing  image  resource  usage  674 
Walking  through  link  view  674 
Link  tag  330,  488 
Link  view  72 
Link  View  Controller  675 
Link  Warnings  180 
Preferences  181 

Link  Warnings  button  91, 180,  687 
Linking  to  external  stylesheets  349 
Links  175 

Inspecting  and  Creating  179 
Links  and  anchors 

Point  & Shoot  insertion  176 
List  Box  462 
Inserting  462 

Lists 

Hierarchical  136 
Numbered  135 
Unnumbered  135 
LiveObjects  preferences  318 

M 

Macintosh  Creator  646 
Macintosh  File  Type  646 
MacOS 

Contextual  menus  80 
Pop-up  windows  80 


MacOS  8.5 

Appearance  Manager  72 
Navigation  Services  72 
MacOS  Encodings  9,  94 
MacPerl  446 
Macromedia 

Flash  75,  202,  606 
Shockwave  75,  202,  606 
Managing  resources  632 
Managing  Web  sites  605-726 
Manual 

Symbols  5 
Marquee  224 
Marquee  Inspector 
Basic  tab  224 
Scrolling  tab  226 
Menu  commands  617 
Add  Files  617,  629 
Add  to  Keywords  487 
Change  References  618,  660 
Clean  Up  619,  710 
Clear  Site  628,  642,  653,  656,  659 
Connect  to  Server  619 
Download  from  Server  619 
duplicate  639 
Edit  Font  Sets  129 
Export  file  645 
Export  Site  619,  691,  701 
Find  Next  574 

FTP  Upload  & Download  620,  696 

Get  Colors  Used  655 

Get  Fontsets  Used  658 

Get  References  Used  653 

Hide  Invisible  Items  143 

Import  Files  617 

Import  Site  Folder  619 

New  (Site  menu)  617 

New  HTML  Attribute  511 

New  HTML  Comment  511 

New  HTML  Tag  511 

New  HTML  Text  511 

New  Site  619,  622 

New  Site  - Blank  619,  623 
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New  Site-  Import  Site  from  Folder  61 9,  623, 
624 

New  Site  - Import  Site  from  FTP  626 

New  Site  - Import  Site  from  FTP  server  619 

New  Site-Import  Site  from  FTP  623 

New  Special  340 

Open  Recent  Files  9 

Remove  Unused  Items  618 

Replace  581 

Replace  & Find  Next  582 
Replace  All  582 
Settings  619 
Show  in  Browser  564 
Show  in  Default  Browser  564 
Start  Tabulator  Indexing  471 
Stop  Tabulator  Indexing  471 
Toggle  Binary  511 
Upload  to  Server  619 
Web  Database  731,734,745 
Web  Download  620,  704 
Menus 

File  menu  94,  620 
Format  menu  123, 132 
Site  menu  618 
Style  menu  123 

Meta  information  in  head  section  489 
Meta  Inspector  490 
Meta  tag  489 

Microsoft  Internet  Explorer9, 166, 177,202,213, 
217,  226,  229,  271, 327,  470,  632 

MIDI  413 

Modules  Manager  9 
Mouse  events 

Double  click  273 
Mouse  Click  273 
Mouse  down  273 
Mouse  Enter  273 
Mouse  Exit  273 
Mouse  up  273 
Mouse  rollover  229,  236 
Move  By  290 

Move  Files  dialog  box  639 
Move  To  292 


Movie  Viewer  381 
MoviePlayer  203 
Multiselection  Inspector 
Alignment  tab  116 
Special  tab  117, 118 
Multiserver  support  715,  718 
N 

Naming 

Java  applets  200 
Pages  104 
Plugins  206 

Navigate  Flistory  (Action)  283 
Navigational  links  679 

Turning  into  physical  hyperlinks  683 
Netscape  Communicator  177,  213,  327 
Netscape  CSS  Fix  (Action)  299 
Netscape  Navigator  124, 125, 135, 170, 177, 202, 
213,229,  271,327,  632 
Network  Module  9 
New  HTML  Attribute 
Button  510 
Menu  command  511 
New  HTML  Comment 
Button  510 
Menu  command  511 
New  HTML  Tag 
Button  510 
Menu  command  511 
New  HTML  Text 
Button  510 
Menu  command  511 
New  Link  button  179, 180 
New  Site  (menu  command)  622 
Blank  619,  623 

Import  Site  from  Folder  619,  623,  624 
Import  Site  from  FTP  619,  623,  626 
New  Site  from  FTP  (dialog  box)  626 
New  Special  command  340 
Nobreak  menu  command  128 
Non-file  objects  611, 651 
Numbered  lists  135 
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0 

Object  Linking  and  Embedding  218 

OLE,  see  Object  Linking  and  Embedding 

OnCall  274 

On  Load  274 

OnUnload  274 

Open  Alert  Window  286 

Open  Recent  Module  9 

Open  Window  284 

Opening  a second  browser  window  284 
Orphan  files  627 
Outline  Editor  64,  509-525 
Features  509 
Launching  512 
Menu  commands  511 
Toolbar  510 
Using  529 
Outline  Toolbar 

New  HTML  Attribute  button  520,  523 
New  HTM L Comment  button  521 
New  HTM L Tag  button  518 
New  EITMLText  button  520 
Toggle  Binary  button  525 
Outline  view 

BODY  tag  51 5 
Box  symbols  515 
Collapse/expand  arrow  515 
Collapsed  view  514 
Collapsing  515 
Color  box  524 
Color  tag  attribute  524 
Creating  new  Web  page  512 
Drag  & drop  handle  515 
Expanding  513,  515 
General  controls  515 
HEAD  tag  515 
HTML  attributes  523 
HTML  hierarchy  515 
HTM  L tag  box  element  51 5 
HTML  tag  name  field  515 
Indents  515 

Inserting  HTML  tags  518 
Inserting  text  520 


Insertion  point  515,  517,  521 
Keyboard  navigation  516 
Page  title  515 
Path  pointer  524 
Show/hide  attributes  arrow  51 5 
Structural  elements  515 
Tag  attributes  519 
Tag  boxes  514 
Tag  types  518 
User  profiles  511 
P 

Page  Inspector 

ColorSync™  tab  166 
HTML  tab  107,  242,317 
Opening  104 
Page  tab  105 
Pending  tab  107,  683 
Page  status  644 
Page  title  644 
Pages 

Giving  a title  104 
Inspecting  644 
Saving  in  site  108 
Palette  57,  86 

Action  Item  icon  247 
ActiveX  Control  icon  218 
Anchor  icon  178 
Base  Tag  icon  486 
Basic  Tags  tab  87,  217 
Browser  Switch  Item  249 
Button  Image  237 
Chapter  Track  icon  420 
Check  Box  icon  455 
Comment  icon  182 
Component  243 
Custom  tab  87 

CyberObjects  tab  67,  88,  230,  611 
Date  and  Time  Stamp  icon  235 
Description  23 
Dynamic  components  244 
Extra  tab  88,  244,  651,681 
Fieldset  & Legend  icon  477 
File  Browser  468 
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Filter  Track  icon  389 

Floating  Box  icon  66,  214,  231 

Form  Button  474 

Form  icon  447 

Forms  tab  88,  446 

Frames  tab  88,  432 

Head  comment  icon  494 

Head  tab  88,  483 

Hidden  icon  461 

Horizontal  Spacer  icon  171 

HREF  Track  icon  416 

Image  icon  151 

Inline  Action  Item  icon  248 

Input  Image  icon  466 

Internet  Explorer  Objects  217 

Islndex  485 

Java  applet  icon  196 

JavaScript  icon  186 

Key  Generator  467 

Keywords  tag  487 

Label  icon  476 

Layout  grid  24,  111 

Layout  Text  Box  icon  25,  36,  62, 120, 121 

Line  Break  icon  183 

Line  icon  26, 168 

Link  tag  488 

List  Box  icon  462 

Marquee  224 

Meta  tag  490 

Music  Track  icon  414 

New  Address  Group  icon  621 

New  Address  icon  621 

New  Color  Group  icon  621 

New  Color  icon  621 

New  Folder  icon  621 

New  Fontset  Group  icon  622 

New  Fontset  icon  621 

New  Page  icon  621 

New  URL  Group  icon  621 

New  URL  icon  621 

Password  Field  icon  458 

Plugin  202 

Popup  Menu  icon  464 


QuickTime  381 
Radio  Button  icon  454 
Refresh  tag  491 
Reset  Button  453 
Site  tab  88,  620 
Sound  Track  icon  414 
Sprite  Track  icon  402 
Submit  Button  icon  451 
Tabs  56 

Text  Area  icon  459 
Text  Field  457 
Text  Track  Track  icon  424 
Unknown  head  tag  492 
URL  Popup  icon  245 
Using  with  Outline  view  517 
Video  Track  icon  385 
WebObjects  tab  88 
Paragraph  Styles  menu  133 
Paragraphs 

Aligning  133, 134 
Password  Field  458 
Inserting  458 
PICT  7, 151, 159 
Play  Scene  293 
Play  Sound  294 
Plugin  Inspector 
Attribs  207 
Basic  tab  204 
Special  tab  208 
Plugins  202 

Alignment  206 

Editing  Attributes  207 

Handling  unknown  formats  210 

Inserting  202 

Naming  206 

Resizing  204 

Selecting  media  file  203 

Setting  up  203 

Spacing  205 

PNG  19,30,  55,150,159,647 
PNG  Image  Format  9 
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Point  & Shoot  59 
Anchors  175 

Changing  hyperlinks  and  file  references  660 

Form  label  with  checkbox  476 

Image  158 

Java  applets  200 

Text  175 

Point  & Shoot  linking  176,  651 
Popup  Menu 
Inserting  464 
Popup  menu  463 
Popup  tag  selection  list  519 
Pop-up  windows  80 
Portable  Network  Graphics  55 
Preferences 

Absolute  paths  721 
Adjusting  program  cache  11 
Browsers  for  previewing  564 
ColorSync™  167 
Find  593 
Fonts  100 

General  - File  Mapping  635 
General  - Page  101 
Image  160 

JavaScript  Editor  font  195 

JavaScript  general  193 

JavaScript  hardcopy  printout  195 

JavaScript  syntax  highlighting  194 

Link  Warnings  181 

LiveObjects  318 

Network  - FTP  Download  700 

Network  - FTP  Server  699 

Network  - General  697 

Program  cache  11 

Regular  Expr  595 

Site  708,  709 

Site  - Export  711 

Site  - Folder  Names  712 

Site  - Page  Status  713 

Site  - Site  View  714 

Source  Editor  540 

Source  Editor  browser  sets  542 

Source  Editor  general  540 


Source  Editor  hardcopy  printout  545 
Source  Editor  screen  font  543 
Source  Editor  syntax  highlighting  544 
Specify  application  to  be  launched  for 
opening  a file  635 
Spellchecking  601 
Preload  Image  (Action)  277 
Preview  Module  10,  562 
Preview  tab  in  document  window  562 
Previewing  561-567 

Browser  Launcher  563 
Browser  preferences  564 
Built-in  562 

HTML  page  in  File  Inspector  646 
Image  in  File  Inspector  648 
QuickTime  movie  in  File  Inspector  648 
Screen  561 

With  Web  browser  563 
Previewing  with  Cascading  Style  Sheets  350 
Program  modules  9-10 
AIAT  Module  9 
Color  Palette  9 
CS  Encodings  9,  94 
CyberFlash  Module  9 
CyberMovie  Module  9 
CyberObjects  Module  9 
IE  Module  9 
MacOS  Encodings  9,  94 
Modules  Manager  9 
Network  module  9 
Open  Recent  Module  9 
PNG  Image  Format  9 
Preview  Module  10 
Scripting  Module  10 
Spellchecker  Module  10 
Web  Download  Module  10 
WebObjects  Module  10 
Proxy  server  698 
Publish  checkbox 

Honor  publish  status  for  FTP  upload  694 
Honor  publish  status  while  exporting  702 
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Publishing 
File  645 
Folder  638 
Publishing  folder 
conditions  638 

0 

Quick  start  guide  15 
QuickDraw3D  647 

QuickTime  75,  78,  203,  377^26,  606 
Annotations  382 
Audio  413 

Chapter  tracks  41FM23 
Copying  a video  track  386 
Creating  new  movie  384 
Editing  tools  379 
Effect  tracks  388 
Filters  388 

HREF  tracks  416-419 
Importing  video  385 
MIDI  413 
Movie  Viewer  381 
Music  tracks  413^15 
Opening  movie  384 
Saving  movie  384 
Sound  413 

Sound  tracks  413-415 
Sprite  tracks  401^13 
Tab  in  Palette  381 
Text  tracks  423^126 
Track  Editor  379 

Buttons  and  controls  380 
Display  compression  options  380 
Video  effects  388,  395^01 
Video  tracks  384 
QuickTime  Inspector 
Annotation  tab  382 
Basic  tab  382 
QuickTime  VR  647 
R 

Radio  Button  454 
Random  Image  (Action)  278 
Read  Cookie  (Action)  312 
Real  Web  Colors  504 


Reference  Inspector  652 

Inspecting  E-mail  addresses  652 
Inspecting  URLs  652 
Refresh  Inspector  491 
Refresh  tag  491 
Refreshing  pages  491 
registering  12 
Regular  Expressions  583 
Relative  Size  submenu  126 
Remove  Link  button  179 
Rename  File  Dialog  Box  650 
Renaming 
Files  649 
Repairing 

Broken  links  180 
Reset  Button  452 
Inserting  453 
Resize  handles  181 
Resize  Window  (Action)  300 
Resizing 

Columns  in  window  78 
Floating  boxes  215 
Horizontal  lines  168 
Interactive  92 
Java  applets  198 
Layout  grid  112 
Plugins  204 
Spacers  171, 172 
Tables  138 
RGB  colors  501 
Rulers,  see  Lines 
S 

Saving 

In  site  folder  108 
Pages  in  site  108 
Scenes  232,  267 

Switching  through  scripted  action  268 
Script 

Inserting  495 
Script  in  head  section  495 
Scripting  Module  10 
Site  Module  10 
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Scripts 

In  page  body  248 
In  page  header  247 

Testing  browser  compatibility  and  switching 
pages  249 

Scroll...  (Action)  300 
Scrolling  Marquee  224 
Search  engines 
Basics  587 
Keywords  487 
Registering  708 
Simulating  588 
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